How to use the CSS Vignette Generator
- The preview starts with a radial vignette. Choose an ellipse (follows the image shape) or a circle.
- Set Solid area (fully visible center) and Fade ends at (where it is fully transparent).
- Use Spotlight to move the visible area off-center.
- Copy the CSS.
Vignette with mask-image
.vignette {
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}The center stays fully visible up to the first stop and fades to transparent by the second. Unlike a dark overlay, a mask vignette fades the image into the real page background, so it works on any color. For straight fades see Fade Image Edges with CSS.
Also searched as: css vignette, vignette effect css, css radial fade, radial gradient mask, vignette generator, css image vignette, circle fade image css.
Tools that pair well with the CSS Vignette Generator
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- Image Shape Mask — Put any photo inside a shape — star, heart, hexagon, circle, arrow, speech bubble… — using a CSS mask-image.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
Frequently asked questions
How do I add a vignette to an image in CSS?
Apply a radial-gradient mask: mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Adjust the two stops to change the size and softness.
How do I make a dark vignette instead of a transparent one?
Put the image on a black background — the mask fades it into the black — or use a radial-gradient overlay with box-shadow: inset.
Ellipse or circle?
An ellipse follows the image’s proportions so all edges fade evenly; a circle gives a round spotlight in the middle.
Can I install CSS Vignette Generator as a web app and use it offline?
Yes. CSS Vignette Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.