Generador de filtros de fondo CSS.
Generador de filtros de fondo CSS gratuito en línea, sin necesidad de instalación. Crea efectos de glassmorphism y desenfoque.
Acerca de CSS backdrop-filter
Crea CSS backdrop-filter en vivo arrastrando los deslizadores de nueve funciones de filtro: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia. La salida emite tanto backdrop-filter como -webkit-backdrop-filter para que el efecto funcione en los navegadores modernos, y se renderiza una tarjeta de vidrio sobre un fondo personalizable para que veas el resultado mientras lo ajustas.
Cómo usar
1. Opcionalmente haz clic en un preset (Frosted Glass, Dark Glass, Vintage, Inverted) para empezar desde un aspecto curado. 2. Arrastra los deslizadores en el panel Controls; cada filtro solo aparece en el CSS generado cuando difiere de su valor predeterminado (p. ej. brightness/contrast/saturate/opacity por defecto 100, blur por defecto 0). 3. Edita el campo Background con cualquier valor CSS background válido (gradiente, url de imagen, color) para probar el filtro sobre diferentes fondos. 4. Haz clic en Copy para copiar ambas declaraciones backdrop-filter y -webkit-backdrop-filter.
Deslizadores de filtro y rangos
blur 0–50px; brightness 0–200% (predeterminado 100); contrast 0–200% (predeterminado 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (predeterminado 100); saturate 0–200% (predeterminado 100); sepia 0–100%. Reset restaura cada deslizador a su valor predeterminado. Los filtros en su valor neutro se omiten de la salida; si todos son neutros la salida es backdrop-filter: none.
▶¿Por qué la vista previa se ve distinta de mi sitio real?
▶¿El CSS copiado incluye el prefijo -webkit-?
▶¿Por qué falta un filtro en mi salida?
▶¿Puedo usar una imagen de fondo en lugar de un gradiente?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.