Skip to content
I Hate Online Tools

Vignette

Darken edges.

This runs in your browser. Nothing is uploaded.

About Vignette

Darkens an image progressively towards its corners using a squared distance falloff from the centre, calculated in your browser at a depth you control.

A vignette pulls the eye inward. Portrait photographers use it to keep attention on the face, product shots use it to stop a bright background competing with the item, and anyone putting text over an image uses it to give white type something darker to sit against. It also imitates what real lenses do at wide apertures, which is why a light one reads as photographic rather than applied.

Every pixel's distance from the centre is measured and divided by the distance from the centre to a corner, giving a value that runs from 0 in the middle to 1 at the corners. That figure is squared, multiplied by your strength, and subtracted from 1 to produce a brightness multiplier for the pixel. Squaring is what leaves the middle of the frame nearly untouched while the falloff accelerates outward. The slider maps 1 through 40 onto strengths of 0.025 up to 1.0, where the corners reach black.

The shape is fixed — a circle centred on the image, with no control over radius, feather or position. On a wide panorama that means the left and right ends darken far more than the top and bottom, which sometimes reads as a mistake rather than a look. It also works by multiplying the colour channels, so a deep red corner heads towards black rather than towards a richer red. Above about strength 25 the corners crush to solid and any detail there is gone permanently.

How to use Vignette

  1. 1Drop your image onto the panel, or click to browse.
  2. 2Set Strength. Roughly 4 to 10 gives a subtle vignette; 40 takes the corners to black.
  3. 3Click Apply preview and check the corners for crushed detail.
  4. 4Click Download to save the PNG.

What it won't do

  • Centre, shape and feather are all fixed; depth is the only control.
  • The falloff is circular in pixel terms, so very wide or very tall images darken unevenly at the ends.
  • Alpha is untouched, so this darkens pixels rather than fading edges to transparent.

Common questions

What vignette strength looks natural?

Somewhere between 4 and 10 on this slider, which corresponds to a corner brightness multiplier of roughly 0.9 to 0.75. That is close to what a fast lens does wide open, so it registers subconsciously rather than as an effect. Past 20 it becomes an obvious stylistic choice, which is fine as long as it is deliberate.

Can I move the vignette off-centre or make it oval?

No. The centre point is always the exact middle of the image and the falloff is always circular in pixel terms. If your subject sits off to one side, crop first so it lands nearer the middle, or use brightness and contrast on the whole frame instead.

Does a vignette behave differently on a wide image?

Yes, and it is worth knowing. Because distance is measured in raw pixels and normalised against the corner, the lines of equal darkness are circles. On a 16:9 or wider image the short edges reach that circle much sooner than the long edges, so the left and right ends darken noticeably more than the top and bottom.

What happens to transparent areas?

The alpha channel is left alone — only the red, green and blue values are scaled. A transparent PNG stays transparent in the same places. The vignette darkens pixels rather than fading them out, so it will not soften an image into its background.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app