Cómo usar: Generador de viñeta CSS
- La vista previa empieza con una viñeta radial. Elige una elipse (sigue la forma de la imagen) o un círculo.
- Ajusta el Área sólida (centro totalmente visible) y El desvanecido termina en (donde queda totalmente transparente).
- Usa Foco para mover el área visible fuera del centro.
- Copia el CSS.
Viñeta con 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%);
}El centro permanece totalmente visible hasta el primer punto de parada y se desvanece hasta transparente en el segundo. A diferencia de una superposición oscura, una viñeta con máscara desvanece la imagen hacia el fondo real de la página, así que funciona con cualquier color. Para desvanecidos lineales, consulta Desvanecer bordes de imagen con CSS.
También se busca como: viñeta css, efecto viñeta css, desvanecido radial css, máscara radial-gradient, generador de viñeta, viñeta de imagen css, desvanecer imagen círculo css.
Herramientas que combinan con: Generador de viñeta CSS
- Generador de máscaras CSS — Haz que imágenes y secciones se desvanezcan en lugar de cortarse en seco: difumina un borde, arriba y abajo, los cuatro bordes, una viñeta radial o un foco, corta el elemento en franjas, o enmascáralo con una forma (estrella, corazón, hexágono, flecha…) con bordes suaves y difuminados que clip-path no puede lograr.
- Máscara de forma CSS — Pon cualquier foto dentro de una forma — estrella, corazón, hexágono, círculo, flecha, globo de diálogo… — usando mask-image de CSS.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de filtros CSS — Ajusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela sobre una imagen de ejemplo o la tuya y copia el CSS de filter.
Preguntas frecuentes
¿Cómo añado una viñeta a una imagen en CSS?
Aplica una máscara radial-gradient: mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Ajusta los dos puntos de parada para cambiar el tamaño y la suavidad.
¿Cómo hago una viñeta oscura en lugar de una transparente?
Coloca la imagen sobre un fondo negro —la máscara la desvanecerá hacia el negro— o usa una superposición radial-gradient con box-shadow: inset.
¿Elipse o círculo?
Una elipse sigue las proporciones de la imagen, así que todos los bordes se desvanecen de forma uniforme; un círculo crea un foco redondo en el centro.
¿Puedo instalar Generador de viñeta CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de viñeta CSS 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.