Desenfoque y cambio de color detrás de un elemento.
La translucidez, el difuminado y otros efectos son maneras útiles de crear profundidad y mantener el contexto del contenido del fondo. Admiten una serie de casos de uso, como vidrio esmerilado, superposiciones de video, encabezados de navegación traslúcidos, censura de imágenes inapropiadas, carga de imágenes, etc. Es posible que reconozcas estos efectos de dos sistemas operativos populares: iOS y Windows 10.
![Ejemplo de un efecto de vidrio esmerilado.](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=3&hl=es-419)
Históricamente, estas técnicas eran difíciles de implementar en la Web y requerían menos que hackeos o soluciones perfectos. En los últimos años, tanto Safari como Edge proporcionaron estas capacidades a través de la propiedad background-filter
(y, como alternativa, -webkit-backdrop-filter
), que combina dinámicamente los colores de primer plano y segundo plano en función de las funciones de filtro. Ahora Chrome admite background-filter
a partir de la versión 76.
backdrop-filter
Prueba el ejemplo en CodePen.
Navegadores compatibles
Por motivos de rendimiento, recurre a una imagen en lugar de un polyfill cuando no se admita backdrop-filter
. Esto se muestra en el siguiente ejemplo.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
Conceptos básicos
- La propiedad
backdrop-filter
aplica uno o más filtros a un elemento y cambia el aspecto de todo lo que está detrás del elemento. - El elemento superpuesto debe ser, al menos, parcialmente transparente.
- El elemento superpuesto obtendrá un nuevo contexto de apilado.
backdrop-filter
de CSS aplica uno o más efectos a un elemento que es translúcido o transparente. Para entenderlo, considera las siguientes imágenes.
![Es un triángulo superpuesto en una circunferencia. El círculo no se puede ver a través del triángulo.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=3&hl=es-419)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![Es un triángulo superpuesto en una circunferencia. El triángulo es translúcido, lo que permite ver el círculo a través de él.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=3&hl=es-419)
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
En la imagen de la izquierda, se muestra cómo se renderizarían los elementos superpuestos si no se usara o no se admitira backdrop-filter
. En la imagen de la derecha, se aplica un efecto de desenfoque con backdrop-filter
. Ten en cuenta que usa opacity
además de backdrop-filter
. Sin opacity
, no habría nada para desenfocar. Casi no hace falta decir que si opacity
se establece en 1
(completamente opaco), no habrá ningún efecto en el fondo.
La propiedad backdrop-filter
es como los filtros de CSS, ya que se admiten todas tus funciones de filtro favoritas: blur()
, brightness()
, contrast()
, opacity()
, drop-shadow()
, etcétera. También admite la función url()
si deseas usar una imagen externa como filtro, así como las palabras clave none
, inherit
, initial
y unset
. Hay explicaciones para todo esto en MDN, incluidas descripciones de sintaxis, filtros y valores.
Cuando backdrop-filter
se establece en cualquier valor que no sea none
, el navegador crea un nuevo contexto de apilamiento. También se puede crear un bloque contenedor, pero solo si el elemento tiene descendientes de posición absoluta y fija.
Puedes combinar filtros para obtener efectos ingeniosos y atractivos, o usar solo uno para obtener efectos más sutiles o precisos. Incluso puedes combinarlos con los filtros SVG.
Ejemplos
Las técnicas y los estilos de diseño que antes se reservaban para los sistemas operativos ahora tienen buen rendimiento y se pueden lograr con una sola declaración de CSS. Veamos algunos ejemplos.
Filtro único
En el siguiente ejemplo, el efecto polarizado se logra combinando el color y el desenfoque. backdrop-filter
proporciona el desenfoque, mientras que el color proviene del color de fondo semitransparente del elemento.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
Varios filtros
A veces, necesitarás varios filtros para lograr el efecto deseado. Para ello, proporciona una lista de filtros separados por un espacio. Por ejemplo:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
En el siguiente ejemplo, cada uno de los cuatro paneles tiene una combinación diferente de filtros de fondo, mientras que el mismo conjunto de formas se anima detrás de ellos.
Superposiciones
En este ejemplo, se muestra cómo desenfocar un fondo semitransparente para que el texto resulte legible a la vez que se combina estilísticamente con el fondo de una página.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Contraste del texto en fondos dinámicos
Como se mencionó anteriormente, backdrop-filter
permite efectos de rendimiento que serían difíciles o imposibles en la Web. Un ejemplo de esto es cambiar un fondo en respuesta a una animación. En este ejemplo, backdrop-filter
mantiene el alto contraste entre el texto y su fondo a pesar de lo que sucede detrás del texto. Comienza con el color de fondo predeterminado darkslategray
y usa backdrop-filter
para invertir los colores después de la transformación.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
Conclusión
Más de 560 de ustedes votaron a favor del error de Chromium en los últimos años, lo que indica claramente que se trata de una función de CSS muy esperada. El lanzamiento de backdrop-filter
de Chrome en la versión 76 acerca la Web a una presentación de IU verdaderamente similar a la del SO.