Vignette Effect Tool

Vignette effect: add a vignette to a photo, free and private

To add a vignette to a photo for free, click Upload an Image, drag the Intensity, Vignette Size and Softness sliders until the edges look right, and click Download. A vignette darkens (or lightens) the edges of a picture so the eye settles on the centre. The default is a black oval at 60% intensity, 50% size and 70% softness, which already works for many portraits.

The tool runs in your browser, so nothing is uploaded (you can check the Network tab in DevTools). The preview is a reduced copy of your photo, up to 1200 pixels on the longest side, but the download is rendered again from the original at its full width and height, using the same resolution-independent maths, so the result matches what you saw.

A vignette pairs well with a warm tone from the sepia filter, a lift from the brightness adjuster or a softer background from the image blur tool.

Table of Use: vignette settings to start from

These are starting points, not rules. Intensity, Vignette Size and Softness are all percentages, and every row is easy to adjust further.

Features

• Six adjustments. Intensity, Vignette Size, Softness, Vignette Color (Black, White or Custom), Shape (Oval that fits the frame, or Circle) and two Center sliders, all with a live preview.
• Custom colour. Use the colour picker or type a hex code such as #1a2b3c or #abc. An invalid code is flagged and the last valid colour keeps being used.
• Compare view. The eye button on the preview shows the original and the result side by side, labelled Original and With Vignette.
• Save as. Same as original, PNG (lossless), JPG (92% quality) or WebP (92% quality). With Same as original, formats the browser cannot write, such as GIF or BMP, are saved as PNG.
• Transparency untouched. Only red, green and blue values change; the alpha channel stays as it was (save as PNG or WebP to keep it; JPG has no transparency).
• One image at a time. Click New Image to start another, or Reset settings to return to the defaults.

The vignette formula

For each pixel the tool measures the distance d from the centre point, scaled so that the farthest corner is 1, then blends the pixel toward the vignette colour:

clear = 1 - Size / 100          (inside this, nothing changes)
fade  = Softness / 100
t     = smoothstep((d - clear) / fade), limited to 0..1
k     = t x Intensity / 100
new   = pixel + (vignette colour - pixel) x k

With the defaults (Intensity 60, Size 50, Softness 70), pixels up to d = 0.5 are untouched. At d = 0.85, k is 0.30, so a white pixel becomes about 178. In the farthest corner k is 0.48 and white becomes about 132. Raising Size to 70 and Intensity to 100 (Softness 70) gives k = 1 in the corner, which is pure black. Smoothstep, x² × (3 − 2x), means the fade has no visible ring where it starts or ends.

To tidy a photo first, trim it with the image cropper, then adjust tones with the contrast adjuster or saturation adjuster.

How to add a vignette, step by step

1. Click Upload an Image, or drop a JPG, PNG, WebP, GIF, BMP, AVIF or other image your browser can open on the upload box.
2. In Vignette Settings, drag Intensity, Vignette Size and Softness while watching the preview.
3. Under Vignette Color pick Black, White or Custom, and choose Oval (fits the frame) or Circle for the Shape.
4. Drag Center (left → right) and Center (top → bottom) so the bright middle sits on your subject.
5. Click the eye button to compare with the original, and Reset settings if you want to start again.
6. Choose a format under Save as and click Download. The file is named after the original with _vignette added.

Who can use it

• Portrait and wedding photographers who want attention on faces, or a soft white edge on bright images.
• Online sellers who want a product to stand out, then resize it to thumbnails for listings.
• Bloggers and social media posters who want a darker edge behind a caption added with the add text to image tool.
• Hobbyists who want an old-film look, perhaps finished with the image border adder or round corner generator.

FAQs