Cómo usar: Generador de máscaras CSS
- Elige un efecto: difuminar un borde, arriba y abajo, todos los bordes, una viñeta, un foco o rayas.
- Ajusta el tamaño del desvanecido, la dirección, la posición o el ancho de las franjas con los controles deslizantes.
- Pruébalo con tu propia imagen usando Usar mi imagen.
- Copia el CSS: incluye
-webkit-mask-image, que Chrome, Edge y Safari todavía necesitan para algunas propiedades.
Cómo funcionan las máscaras CSS
mask-image usa una imagen o un degradado como plantilla: donde la máscara es opaca se ve el elemento, donde es transparente el elemento desaparece y, entre ambos, se desvanece. Los degradados son las máscaras más útiles porque no necesitan archivos adicionales:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Desvanecer todos los bordes requiere dos degradados combinados con
mask-composite: intersect(y-webkit-mask-composite: source-in), que el generador añade por ti. - Las máscaras no cambian el diseño ni la detección de clics: la zona desvanecida sigue siendo clicable.
- A diferencia de
opacity, una máscara puede desvanecer solo una parte de un elemento; a diferencia de un degradado superpuesto, muestra el fondo real que hay detrás.
Máscaras de forma frente a clip-path
El efecto Forma convierte una forma de clip-path en un SVG insertado que se usa como mask-image. El resultado se parece a clip-path, pero el borde puede tener difuminado, y la forma puede escalarse con mask-size y repetirse con mask-repeat.
Para recortar formas con bordes duros en lugar de desvanecerlas, usa el Generador de clip-path. Para efectos de color, el Generador de filtros CSS.
También se busca como: mask-image generator, difuminar bordes de imagen css, máscara degradado css, efecto desvanecer imagen css, viñeta css, mask image linear gradient, webkit mask image, difuminar bordes css.
Herramientas que combinan con: Generador de máscaras 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 Olas SVG — Diseña separadores ondulados para landing pages: añade o quita olas (hasta 6, cada una con su propio color, opacidad y forma), ajusta el número de crestas, la altura y la suavidad, elige colores y decide si la ola va arriba o abajo.
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de Glassmorphism — Diseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los navegadores: con el prefijo -webkit-backdrop-filter y un fallback para navegadores antiguos.
Preguntas frecuentes
¿Cómo difumino los bordes de una imagen con CSS?
Aplica una máscara de degradado: mask-image: linear-gradient(to bottom, #000 70%, transparent) difumina la parte inferior. Para difuminar todos los bordes, combina un degradado horizontal y uno vertical con mask-composite: intersect: elige aquí “Desvanecer todos los bordes”.
¿Sigo necesitando -webkit-mask-image?
Sí, para la mejor compatibilidad. Los navegadores basados en Chromium y Safari todavía dependen de las versiones -webkit- de algunas propiedades de máscara, así que el generador muestra ambas.
¿Cuál es la diferencia entre mask-image y clip-path?
clip-path recorta una forma de bordes duros; mask-image puede desvanecer gradualmente usando un degradado o una imagen como plantilla.
¿Cómo doy bordes suaves a una forma de clip-path?
clip-path siempre corta bordes duros. Elige aquí el efecto Forma: las mismas formas se convierten en una máscara SVG, y el control Difuminado desenfoca su borde para que la imagen se desvanezca suavemente.
¿Puedo usar una imagen o un SVG como máscara?
Sí: elige “Mi imagen o SVG como máscara” y sube un PNG con transparencia o un SVG. Sus partes opacas muestran el elemento y las transparentes lo ocultan; ajusta el tamaño, la repetición y la posición de la máscara, y luego copia el CSS y apunta url() a tu archivo.
¿Puedo instalar Generador de máscaras CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de máscaras 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.