Generator filtrów CSS backdrop-filter.
Bezpośrednio online generator filtrów CSS backdrop-filter, bez konieczności instalacji. Twórz efekty glassmorphism i rozmycia.
O 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.
Jak używać
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.
Suwaki filtrów i zakresy
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.
▶Dlaczego podgląd wygląda inaczej niż moja rzeczywista witryna?
▶Czy skopiowany CSS zawiera przedrostek -webkit-?
▶Dlaczego filtr brakuje w moim wyniku?
▶Czy mogę użyć obrazu tła zamiast gradientu?
Jeśli ten tool był dla ciebie przydatny, pomyśl o tym, aby kupić mi kawę.
Kup mi kawę.