Cómo 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.
También se busca como: css vignette, vignette effect css, css radial fade, radial gradient mask, vignette generator, css image vignette, circle fade image css.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar CSS Vignette Generator como aplicación web y utilizarla sin conexión?
Sí. CSS Vignette Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.