Vignette Studio
Add cinematic vignette shading with saturation, contrast and warmth controls.
Darken The Edges, Keep The Middle
A vignette darkens the corners of a picture and leaves the centre alone. It started as a defect — early lenses could not evenly illuminate the whole frame — and became a technique, because it does something useful: the eye goes to the brightest part of an image, so darkening the edges points it at the subject.
The controls here separate the four things that make up the effect, so a vignette can be a barely visible nudge or a heavy theatrical frame, and the colour grading alongside it is applied at full resolution on export.
Key features
- Four separate controls — strength, size, softness and colour, rather than one "amount" slider.
- Follows the frame shape — an ellipse matching the picture, not a circle sitting inside it.
- Colour grading alongside — saturation, contrast and warmth in the same pass.
- Four presets — cinematic, portrait, noir and reset, as starting points rather than filters.
- Full resolution export — the preview is scaled to fit; the download is processed at the original size.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Vignette Studio
- Choose a photo
It is read in the page; the file on your disk is never modified. - Start from a preset
Cinematic and portrait are good starting points; adjust from there rather than accepting them. - Tune the vignette
Size sets where the darkening begins, softness how gradually it arrives. - Download the PNG
Rendered at the original resolution with every setting applied.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Media |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why does a black vignette sometimes look muddy?
Because pure black over a warm photograph reads as grey. Try a very dark blue for a cool, filmic look or a dark brown for a warm one — that is why the vignette colour is a control rather than fixed, and it is what the cinematic preset uses.
How strong should a vignette be?
Less than feels right while you are adjusting it. A vignette works when the viewer does not notice it, and on a phone screen in daylight an effect that looked subtle on a good monitor often disappears. Around 35–45% suits most photographs.
Why is the export different from the preview?
It should not be — both run the same code. The preview is rendered at a smaller size to stay responsive, so a very fine grain or a hairline gradient can appear slightly different. The exported file is always processed at the original resolution.
Can I use this on a logo or a screenshot?
You can, but a vignette is a photographic device and it rarely flatters flat graphics — it makes a screenshot look like it was taken through a tube. The saturation and contrast controls are useful on their own with the vignette strength at zero.