Cómo aplicar efectos visuales con backdrop-filter en CSS
¿Qué es backdrop-filter y cómo se utiliza?
El backdrop-filter se utiliza para manipular el área de fondo que está detrás de un elemento, aplicando efectos como blur(), brightness(), contrast(), entre otros. A diferencia de filter, que afecta solo el contenido dentro del elemento, backdrop-filter se aplica a los elementos traseros, ideal para crear interfaces modernas con transparencias y texturas.
Sintaxis básica:
.elemento {
backdrop-filter: blur(5px) brightness(1.2);
}En el ejemplo anterior, el contenido detrás del elemento recibirá un desenfoque de 5px y un aumento en el brillo del 20%.
Ejemplos de uso con backdrop-filter
1. Desenfoque de fondo:
.desenfoque {
backdrop-filter: blur(10px);
}Aplicar desenfoque al fondo del elemento.
2. Escala de grises:
.escala-grises {
backdrop-filter: grayscale(80%);
}Convierte el fondo a una escala de grises del 80%.
3. Efecto combinado:
.efecto-combinado {
backdrop-filter: blur(5px) contrast(1.5);
}Se combinan el desenfoque y el aumento de contraste.
Referencia oficial
Para más detalles sobre esta propiedad, consulta la documentación oficial de MDN sobre backdrop-filter.
Jorge García
Fullstack developer