Generador de Backdrop Filter CSS
Configuración del filtro de fondo
Core
Color
Extra
Vista previa en vivo
Glass Panel
Backdrop preview
This panel blurs and filters the colorful content behind it.
Blur
Glass
Depth
Frost
Estado
inactivo
¿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.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de filtros CSS
Genere y analice valores de filtro CSS con vista previa en vivo para desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación y sepia.
Utilidades varias
›
Generador de animación CSS
Genere taquigrafía de animación CSS, fotogramas clave y CSS listo para usar con vista previa en vivo.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Convertidor de colores
Convierta colores HEX, RGB, RGBA y HSL instantáneamente en su navegador.
Utilidades varias
›
Preguntas frecuentes
¿Cuál es la diferencia entre `filter` y `backdrop-filter`?
`filter` afecta al propio elemento, mientras que `backdrop-filter` afecta al contenido visible detrás del elemento.
¿Por qué mi filtro de fondo no es visible?
El elemento normalmente necesita un fondo transparente o semitransparente para que se pueda ver el contenido detrás de él.
¿Debo incluir -webkit-backdrop-filter?
Sí, agregar la versión con prefijo mejora la compatibilidad en los navegadores basados en WebKit.
¿`backdrop-filter` sirve para glassmorphism?
Sí. Es una de las propiedades CSS clave para crear interfaces con efecto de vidrio esmerilado.