Generador de Backdrop Filter CSS
Configuración del filtro de fondo
Vista previa en vivo
¿Qué es el filtro de fondo CSS?
El `backdrop-filter` CSS aplica efectos visuales al contenido que está detrás de un elemento, no al elemento en sí. Se usa mucho en tarjetas glassmorphism, overlays esmerilados, encabezados sticky y diálogos translúcidos.
Este generador le ayuda a crear valores de filtro de fondo rápidamente, obtener una vista previa en vivo y copiar CSS listo para producción, incluida la versión con prefijo WebKit para una mejor compatibilidad con el navegador.
Cómo utilizar este generador
- Ajuste el desenfoque, el brillo, el contraste, la saturación y otros controles.
- Mire la actualización del panel de vidrio en la vista previa en vivo.
- Copie el valor del filtro de fondo o la regla CSS completa.
- Pégalo en tu hoja de estilo y combínalo con un fondo semitransparente.
Consejos
- Los filtros de fondo funcionan mejor con fondos semitransparentes como rgba(255,255,255,0.15).
- Los valores de desenfoque más altos crean un efecto de vidrio esmerilado más suave.
- La saturación y el brillo pueden hacer que el fondo borroso se sienta más vívido.
- Agregue un borde claro y una sombra para conseguir un efecto glassmorphism más creíble.
Comprobaciones de backdrop-filter antes de aplicar efectos
Los backdrop filters procesan el contenido posterior; stacking, transparencia, soporte y coste determinan el resultado real.
Mantén un fondo transparente
Usa un fondo translúcido y verifica las capas posteriores; un relleno opaco oculta el resultado del filtro.
Prueba stacking contexts
Revisa z-index, transforms, isolation, overflow, elementos fixed y filtros anidados que cambien la composición.
Ofrece un fallback
Elige un fallback sólido o translúcido que preserve contraste y jerarquía cuando backdrop-filter no funcione.
Mide el rendimiento
Prueba scroll y animación en móviles y reduce regiones filtradas grandes cuando disminuya la fluidez.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.