Generador de filtros de fondo CSS.

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.

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.

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.