Generator filtrów CSS backdrop-filter.

Twórz na żywo CSS backdrop-filter, przeciągając suwaki dziewięciu funkcji filtru: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate i sepia. Wynik emituje zarówno backdrop-filter, jak i -webkit-backdrop-filter, aby efekt działał w nowoczesnych przeglądarkach, a nad dostosowywanym tłem renderowana jest karta ze szkła, abyś widział wynik podczas dostrajania.

1. Opcjonalnie kliknij preset (Frosted Glass, Dark Glass, Vintage, Inverted), aby wystartować od wyselekcjonowanego wyglądu. 2. Przeciągaj suwaki w panelu Controls; każdy filtr pojawia się w wygenerowanym CSS tylko wtedy, gdy różni się od wartości domyślnej (np. brightness/contrast/saturate/opacity domyślnie 100, blur domyślnie 0). 3. Edytuj pole Background dowolną prawidłową wartością CSS background (gradient, url obrazu, kolor), aby testować filtr na różnych tłach. 4. Kliknij Copy, aby skopiować obie deklaracje backdrop-filter i -webkit-backdrop-filter.

blur 0–50px; brightness 0–200% (domyślnie 100); contrast 0–200% (domyślnie 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (domyślnie 100); saturate 0–200% (domyślnie 100); sepia 0–100%. Reset przywraca każdy suwak do wartości domyślnej. Filtry o wartości neutralnej są pomijane w wyniku; jeśli wszystkie są neutralne, wynikiem jest backdrop-filter: none.