backdrop-filter para efecto de vidrio esmerilado
Cree efectos de desenfoque de vidrio esmerilado en elementos superpuestos a otro contenido mediante backdrop-filter.
backdrop-filter para efecto de vidrio esmerilado es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es backdrop-filter?
backdrop-filter aplica efectos gráficos al área situada detrás de un elemento, en lugar de aplicarlos al elemento mismo. El elemento debe tener cierto grado de transparencia (un fondo con alfa inferior a 1 o ningún fondo) para revelar el fondo filtrado.
Efecto de vidrio esmerilado
El patrón clásico de vidrio esmerilado:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Prefijo -webkit-backdrop-filter
Safari requiere el prefijo -webkit-backdrop-filter. Inclúyalo siempre junto con la propiedad estándar para ofrecer compatibilidad entre navegadores.
Funciones de filtro disponibles
backdrop-filter admite las mismas funciones que filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Vidrio esmerilado oscuro
Una variante oscura para superposiciones y cuadros de diálogo modales:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Requisito del contexto de apilamiento
backdrop-filter crea un contexto de apilamiento. El elemento debe componerse sobre el fondo; es decir, debe estar por encima del resto del contenido en el orden de apilamiento (no necesariamente mediante z-index, sino mediante el orden de pintura).
Rendimiento de backdrop-filter
Un backdrop-filter: blur() intenso resulta costoso, ya que obliga al navegador a renderizar el fondo en un paso independiente. Para obtener un buen rendimiento en dispositivos móviles, use valores de desenfoque de 20px o menos. Evítelo en contenido que se repinte con frecuencia.
Modal con superposición de vidrio esmerilado
Un cuadro de diálogo modal con una superposición de vidrio esmerilado:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Navegación fija con efecto de vidrio
Una barra de navegación fija con efecto de vidrio esmerilado:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Compatibilidad con navegadores
backdrop-filter es compatible con Chrome 76 o posterior, Firefox 103 o posterior y Safari 9 o posterior (webkit). Incluya siempre el prefijo -webkit-. Consulte caniuse.com para obtener datos actualizados y proporcione una alternativa opaca para los navegadores que no sean compatibles.
Alternativa opaca
Proporcione un fondo opaco como alternativa para los navegadores que no admitan backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Comprobación rápida
¿Qué debe tener un elemento para que backdrop-filter sea visible?
Resumen
backdrop-filter aplica efectos de filtro a lo que está detrás de un elemento. El elemento necesita transparencia para que el efecto pueda verse a través de él. El vidrio esmerilado clásico utiliza blur() + saturate(). Incluya siempre -webkit-backdrop-filter para Safari. Proporcione una alternativa opaca mediante @supports.
Preguntas frecuentes
¿La lección «backdrop-filter para efecto de vidrio esmerilado» es gratis?
Sí — el texto completo de «backdrop-filter para efecto de vidrio esmerilado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «backdrop-filter para efecto de vidrio esmerilado»?
Cree efectos de desenfoque de vidrio esmerilado en elementos superpuestos a otro contenido mediante backdrop-filter. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «backdrop-filter para efecto de vidrio esmerilado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- filter: blur, brightness, contrast y grayscale
- backdrop-filter para efecto de vidrio esmerilado
- mix-blend-mode para mezclar capas
- Propiedad isolation