Equipo Editorial | Utilidades.io
Desarrollamos herramientas prácticas, rápidas y gratuitas para el día a día.
Diseña enmascaramientos CSS con gradientes dinámicos, previsualiza el resultado e inspecciona la curva de opacidad.
Hemos diseñado este generador para facilitar la creación de efectos visuales avanzadas utilizando únicamente CSS nativo. Las máscaras permiten controlar la opacidad de áreas específicas de un contenedor sin recurrir a programas de edición de imagen externos.
La propiedad CSS mask-image permite ocultar o revelar partes de un elemento mediante una imagen de máscara o un gradiente, determinando la visibilidad según la transparencia del mapa de enmascaramiento.
Sí, la mayoría de los navegadores modernos soportan mask-image, aunque en algunos casos como Safari o versiones más antiguas de Chrome es recomendable incluir el prefijo -webkit-mask-image para garantizar la máxima compatibilidad.
clip-path es una máscara vectorial que recorta de forma tajante (todo o nada) los bordes de un elemento mediante formas geométricas, mientras que mask-image permite niveles complejos de transparencia semi-transparente mediante gradientes de alfa o imágenes PNG/SVG.