Image Vignette

What is an image vignette?

A vignette is a visual effect that gradually darkens the edges and corners of an image while leaving the center bright. The result looks as though the photo is being viewed through a soft circular frame, drawing the viewer's eye toward the middle of the frame. Vignettes appear naturally in many lenses — especially wide-aperture and vintage designs — and are frequently added deliberately in portrait, wedding and cinematic photography to add mood and focus attention on the subject.

This tool reproduces that look digitally and entirely in your browser. You upload an image, choose how strong the darkening should be with the intensity slider, and the tool walks every pixel, computes its distance from the image center, and multiplies the RGB channels by a falloff factor so that pixels near the corners are dimmed more than pixels near the center. Because the whole pipeline runs locally with JavaScript and the Canvas API, nothing is uploaded and the result is ready almost instantly.

How the vignette filter works

Under the hood the tool uses the Canvas 2D API. The source image is drawn onto an off-screen canvas, then getImageData returns the raw pixel buffer. For every pixel the tool calculates its Euclidean distance from the geometric center of the image, normalizes it by the distance from the center to a corner (the maximum possible distance), and squares the result to produce a smooth radial falloff curve. That falloff value is multiplied by the intensity fraction, and each RGB channel is scaled by 1 − intensity × falloff², so the very center is untouched and the corners receive the maximum darkening.

Squaring the normalized distance produces a soft, natural-looking gradient rather than a hard ring. At 0% intensity nothing changes, at 50% the corners are darkened by about half of their original brightness, and at 100% the corners are pushed fully to black. Because the conversion is a simple per-pixel operation, it is extremely fast even on large images.

Vignette vs other darkening effects

A vignette is not the same as simply lowering the brightness of an image. Brightness reduction darkens every pixel by the same amount, flattening the picture and washing out detail. A vignette, by contrast, applies a radial gradient: the center keeps its full brightness and only the edges recede, which preserves the subject while fading the periphery. This makes the viewer's eye naturally gravitate toward the middle of the frame.

Compared to a solid black border, a vignette is far softer because the darkening ramps up gradually instead of cutting in sharply. Compared to a gradient overlay, a vignette is geometric — it always follows the center of the image rather than a single direction, so it works equally well on landscape, portrait and square crops. The result is a classic photographic look that flatters almost any subject.

When to use a vignette

Vignettes are a versatile finishing touch used across many genres of photography and design. A subtle darkening of the corners can turn a flat snapshot into a polished image, while a stronger vignette adds drama and atmosphere. Common scenarios include:

• Portraits and weddings. Darken the edges so the viewer's eye locks onto the subject's face, separating them from a busy background.
• Product photography. Use a gentle vignette to lift the product out of the surrounding white or grey seamless backdrop.
• Cinematic stills. Add a strong vignette to recreate the look of anamorphic lenses and draw attention to the center of the action.
• Vintage and lo-fi looks. Pair a vignette with sepia or grain filters to mimic old film cameras whose lenses naturally darkened the corners.
• Web and graphic design. Soften the edges of a hero image so that overlaid text and UI elements read more clearly.

Whenever you want an image to feel more focused, more dramatic or more nostalgic, a vignette is the fastest way to get there.

How to add a vignette to an image

Adding a vignette takes only a few seconds and runs completely in your browser — no uploads, no sign-up, no watermark. Follow these steps:

1. Upload your image. Click the upload area or drag and drop a JPG, PNG, WebP, GIF or BMP file. The image is decoded and previewed instantly.
2. Set the intensity. Use the slider from 0 to 100%. Higher values darken the corners more, producing a stronger framed effect.
3. Choose an output format. Pick PNG for lossless quality, JPG for smaller photos, or WebP for a modern balance of size and quality.
4. Click Apply Vignette. The tool processes the image and shows the original and result file sizes side by side.
5. Download the result. Click "Download Vignette" to save the image. The original file stays untouched on your device.

Because every step runs locally in your browser using JavaScript, your image is never uploaded to a server. This makes the tool completely private, fast and suitable for sensitive images.