Como usar: 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.
Também pesquisado como: css vignette, vignette effect css, css radial fade, radial gradient mask, vignette generator, css image vignette, circle fade image css.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o CSS Vignette Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Vignette Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.