Efecto máscara gradiente en CSS
Usar mask-image con un gradiente lineal para crear un efecto visual que controle la visibilidad de un elemento HTML.
Vamos a explicar cómo crear una máscara con gradiente para esconder un texto. Es un efecto común que se usa cuando no se quiere mostrar todo el contenido al usuario para sugerirle realizar alguna acción para ver el texto completo.
Una de las formas más rápidas de crear este efecto es usar la propiedad css mask-image, que nos permite usar un gradiente como si fuera un filtro de visibilidad. Vamos a ver cómo funciona y cómo podemos aprovecharlo.
Ejemplo completo
Aquí puedes ver el resultado final.
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Efecto máscara gradiente en CSS</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background: #f4f4f4; }
.content-wrapper { position: relative; width: 600px; overflow: hidden; background: white; padding: 2rem; border-radius: 12px; }
p { mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 15%, rgba(0, 0, 0, 1) 75%); } </style></head>
<body> <div class="content-wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, elit ut laoreet suscipit, arcu ex convallis enim, sed suscipit magna lorem sed ipsum. Vestibulum eget tortor nec lectus lacinia sodales. Integer dignissim bibendum fermentum. Vivamus at massa justo. Cras ultricies eget nisl a commodo. Suspendisse sed eros id risus volutpat hendrerit. Proin a facilisis nulla. Morbi id ipsum ac diam accumsan tincidunt. In at orci rutrum, sollicitudin nulla vitae, luctus tellus. Duis convallis libero at sapien malesuada, vitae varius orci sollicitudin. Donec venenatis odio sed orci posuere, a mattis metus cursus. </p> </div></body>
</html>¿Qué hace exactamente mask-image?
Cuando usamos mask-image con un gradiente, estamos diciendo que partes del elemento serán visibles y otras no, dependiendo del valor alfa (transparencia) de ese gradiente. A diferencia de background-image, que pinta un fondo, mask-image controla qué partes del elemento se renderizan en pantalla.
En otras palabras: el gradiente se convierte en una especie de plantilla de recorte. Donde hay negro, no se muestra nada. Donde hay blanco, se muestra el contenido normalmente. Y en las zonas intermedias (grises o con transparencias), se aplica una visibilidad parcial.
Ejemplo práctico: desvanecer el borde superior de un bloque
Supongamos que tenemos un bloque con mucho contenido, pero queremos que la parte superior se desvanezca visualmente. Podríamos usar este código:
.elemento-con-mascara { mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 15%, rgba(0, 0, 0, 1) 75%); -webkit-mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 15%, rgba(0, 0, 0, 1) 75%);}Este gradiente va de transparente a opaco en dirección vertical (0 grados), desde el 15% hasta el 75% del alto del elemento. En la práctica, eso significa que el borde superior empezará siendo completamente invisible y ganará opacidad a medida que bajamos. Como el “filtro” se muestra encima del texto, este se irá desvaneciendo.
El prefijo -webkit- es necesario si queremos compatibilidad con la mayoría de navegadores basados en WebKit (Chrome, Safari, Edge Chromium).
Conclusión
Las máscaras con gradiente en CSS pueden parecer un recurso poco común, pero nos abren puertas para controlar de forma precisa la visibilidad de nuestros elementos, sin tener que recurrir a trucos más complejos.