# Backdrop filter en CSS: cristal esmerilado que sigue siendo rápido [Canonical HTML page](https://gradiently.design/es/guide/css-blur-background) El cristal esmerilado son tres líneas de CSS y aun así puede hacer que un buen móvil vaya a tirones. Aquí tienes el código, lo que cuesta dibujarlo y las alternativas que mantienen el texto legible cuando el desenfoque no llega. ## The short version - El backdrop filter de CSS aplica efectos como el desenfoque a la zona que queda detrás de un elemento, no al propio elemento. - Un elemento necesita un fondo parcialmente transparente para que se vea el backdrop filter; sobre un fondo sólido el efecto queda oculto. - El coste del desenfoque crece con el radio y con el tamaño de la zona desenfocada, y se vuelve a pagar cada vez que se mueve el contenido de detrás. - Safari necesitó el prefijo -webkit-backdrop-filter hasta la versión 18, así que incluir ambas líneas sigue siendo la opción segura. - Una buena alternativa es un fondo más opaco dentro de una consulta @supports, para que el texto siga siendo legible cuando falta el desenfoque. Un **backdrop filter** en CSS aplica un efecto gráfico, normalmente un desenfoque, a lo que queda detrás de un elemento. Escribe `backdrop-filter: blur(12px)` en un elemento con fondo parcialmente transparente y la página de debajo se suaviza: es el efecto de cristal esmerilado que se usa en barras de navegación, paneles y tarjetas. Funciona en todos los navegadores actuales. El oficio está en mantener pequeña la zona desenfocada, moderado el radio y legible la alternativa. ## La receta básica del cristal esmerilado Tres cosas hacen el cristal: un relleno translúcido para que se vea lo de detrás, el propio desenfoque y un borde tenue para que el panel tenga forma. La mayoría añade además un pequeño aumento de saturación, porque desenfocar promedia los colores y los deja más grises de lo que esperas. ```css .glass { background: rgb(255 255 255 / 0.14); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgb(255 255 255 / 0.22); border-radius: 16px; } ``` Un panel de cristal claro para una página oscura o colorida. Deja primero la línea con prefijo para que la propiedad estándar gane donde se entienden las dos. El cristal solo parece cristal cuando detrás hay algo que merezca la pena desenfocar. Sobre una página gris plana, el panel simplemente se ve apagado. Ponlo sobre una fotografía o un degradado rico, como explica con más detalle [glassmorphism](https://gradiently.design/es/guide/glassmorphism). Brasa y violeta sobre medianoche: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)` Un fondo con manchas de color bien definidas. El desenfoque convierte las manchas en luz suave detrás del panel, que es todo el sentido del efecto. ## Qué pueden hacer las funciones de backdrop-filter La propiedad acepta las mismas funciones que `filter`, y puedes encadenarlas en una sola declaración. Se aplican en orden, de izquierda a derecha, así que `blur()` seguido de `saturate()` se comporta distinto que al revés. La lista completa está en [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter). | Función | Ejemplo | Sirve para | | --- | --- | --- | | `blur()` | `blur(12px)` | Cristal esmerilado, desenfocar lo que hay tras un diálogo | | `saturate()` | `saturate(160%)` | Devolver el color después de que el desenfoque lo agrise | | `brightness()` | `brightness(0.7)` | Oscurecer una zona recargada detrás de un texto claro | | `contrast()` | `contrast(0.8)` | Calmar una foto ruidosa bajo un panel | | `grayscale()` | `grayscale(1)` | Apagar la página detrás de un modal | | `none` | `none` | Desactivar el efecto en una alternativa o una media query | Las funciones que de verdad vas a usar. `brightness()` por debajo de 1 suele ser mejor herramienta de legibilidad que un desenfoque más fuerte. ## Rendimiento del backdrop filter El desenfoque es una de las cosas más caras que dibuja un navegador. Para desenfocar una zona tiene que leer cada píxel detrás del elemento, muestrear sus vecinos hasta el radio del desenfoque y componer el resultado, y repite ese trabajo cada vez que cambia algo detrás del panel. Una cabecera fija sobre una página que se desplaza vuelve a dibujar su desenfoque en cada fotograma del scroll. El coste depende de dos números que tú controlas: la superficie del elemento y el radio. Una cabecera de 64 píxeles desenfocada a 12px es barata en casi cualquier dispositivo. Una capa a pantalla completa desenfocada a 40px sobre un vídeo puede perder fotogramas en un móvil de gama media. El panorama completo está en [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance). ### Lento - Desenfocar toda la ventana detrás de un modal - Radios de 30px o más - Animar el radio del desenfoque al abrir y cerrar - Paneles de cristal dentro de paneles de cristal - Desenfoque sobre un vídeo que se reproduce solo ### Rápido - Desenfocar solo la barra, la tarjeta o el panel que lo necesita - Radios de entre 8px y 20px - Hacer aparecer el panel con la opacidad, con el desenfoque fijo - Una sola capa de cristal, con rellenos sólidos dentro - Desenfoque sobre imágenes fijas y degradados > **Mídelo en un móvil real** En las herramientas para desarrolladores de Chrome, abre el panel Rendering, activa el resaltado de pintado y desplázate. Si el cristal parpadea en cada fotograma y el panel Performance muestra fotogramas perdidos, reduce la superficie o el radio antes que nada. ## Por qué backdrop-filter no funciona Cuando el desenfoque parece no hacer nada, la causa casi siempre está en una lista corta. 1. **Comprueba que el fondo sea transparente** Un `background: #fff` sólido tapa por completo el fondo desenfocado. Usa un valor con alfa como `rgb(255 255 255 / 0.15)`. 2. **Añade el prefijo de Safari** Safari solo acepta la propiedad sin prefijo desde la versión 18. Los iPhone más antiguos siguen necesitando `-webkit-backdrop-filter`. 3. **Busca una raíz de backdrop por encima** Un elemento padre con `filter`, `opacity` por debajo de 1, una máscara o su propio backdrop filter limita lo que el hijo puede ver. El hijo entonces solo desenfoca ese padre, lo que a menudo parece que no hay desenfoque. 4. **Vigila los hijos fijos** Como `filter`, un backdrop filter convierte el elemento en el bloque contenedor de los hijos con posición fija y absoluta. Un menú fijo dentro de una cabecera de cristal se colocará respecto a la cabecera, no a la ventana. 5. **Asegúrate de que haya algo detrás** Un desenfoque sobre un color plano es invisible. Desplaza el panel sobre una imagen para confirmar que funciona. ## Una alternativa que mantiene el texto legible Los paneles translúcidos se diseñan contando con el desenfoque. Sin él, un relleno blanco al 14 por ciento sobre una foto recargada deja el texto sobre la propia foto, y el contraste se hunde. Escribe primero la versión legible y después mejórala donde el navegador pueda desenfocar. ```css /* Works everywhere: opaque enough to read on its own */ .glass { background: rgb(15 23 42 / 0.86); color: #f8fafc; } /* Upgrade where blur is available */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgb(15 23 42 / 0.45); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } } /* Respect people who ask for less transparency, where supported */ @media (prefers-reduced-transparency: reduce) { .glass { background: rgb(15 23 42 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } } ``` Mejora progresiva para el cristal. El soporte de `prefers-reduced-transparency` todavía es limitado, así que trata ese bloque como una cortesía más que como una garantía. Comprueba el contraste en el peor punto detrás del panel, no en la media. Un titular blanco sobre un cristal que se desplaza por un cielo luminoso puede quedar muy por debajo de las relaciones de [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). Oscurecer con `brightness(0.7)` suele arreglarlo de forma más fiable que desenfocar más. ## Cuándo no necesitas ningún desenfoque Mucho cristal esmerilado existe solo para que las palabras se lean sobre un fondo recargado. Si el fondo lo diseñas tú, uno más tranquilo resuelve el problema sin coste de renderizado. Un degradado suave y de bajo contraste detrás de una cabecera no necesita panel; consulta [fondos para la cabecera de una web](https://gradiently.design/es/guide/website-hero-background) y [fondos desenfocados](https://gradiently.design/es/guide/blurred-background), donde el desenfoque se integra una vez en la imagen en lugar de calcularse en cada fotograma. Una cabecera web ancha con un titular que cruza la parte más luminosa de un degradado colorido Palabras directamente sobre un fondo animado: aquí es donde la gente recurre a un panel de cristal. La misma cabecera web en la que el degradado se vuelve más oscuro y tranquilo detrás del titular El mismo fondo calmándose detrás de las palabras, sin panel, sombra ni desenfoque. Ese segundo enfoque es cómo resuelve Gradiently la legibilidad: un Mark sabe dónde están las palabras y desplaza detrás de ellas su zona más tranquila y con mejor contraste, así que nunca necesitas una caja ni un desenfoque para rescatar un titular. ## FAQ ### ¿Qué diferencia hay entre filter y backdrop-filter? `filter` cambia el elemento y su contenido. `backdrop-filter` cambia solo lo que se ve detrás del elemento, a través de su fondo transparente. ### ¿Por qué no se ve el desenfoque de mi backdrop-filter? Normalmente porque el fondo del elemento es totalmente opaco, porque Safari necesita el prefijo `-webkit-` o porque un padre con `filter`, `opacity` o una máscara limita lo que el elemento puede ver. ### ¿Backdrop-filter es malo para el rendimiento? Puede serlo. El coste crece con la zona desenfocada y el radio, y se vuelve a pagar cada vez que se mueve el contenido de detrás, así que mantén pequeños los paneles de cristal y moderados los radios. ### ¿Sigo necesitando -webkit-backdrop-filter? Safari acepta la propiedad sin prefijo desde la versión 18, pero los iPhone antiguos siguen en uso, así que incluir ambas líneas sigue siendo sensato. ### ¿Qué valor de desenfoque queda mejor para el cristal esmerilado? Entre 8px y 20px encaja en la mayoría de las interfaces. Añade `saturate()` por encima del 100% para recuperar el color que quita el desenfoque.