Glassmorphism CSS
Stwórz efekt mlecznego szkła (rozmycie tła) z podglądem na żywo i gotowym CSS.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Efekt szkła, bez zgadywania
Ustaw rozmycie, przezroczystość, zaokrąglenie i obramowanie: panel mlecznego szkła aktualizuje się na żywo na kolorowym tle, a pełny CSS (z prefiksem Safari) jest gotowy do skopiowania.
-
Ustaw rozmycie
Jak mocno rozmyte jest tło.
-
Dostrój szkło
Przezroczystość, zaokrąglenie, obramowanie, odcień.
-
Skopiuj CSS
Zastosuj do karty lub paska.
Wygenerowany CSS (ustawienia domyślne)
| Właściwość | Wartość |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Prefiks -webkit-backdrop-filter jest dodawany dla Safari. Efekt widać tylko na niejednolitym tle. Wszystko generowane lokalnie.
Najczęstsze pytania
Czym jest glassmorphism?
Styl interfejsu naśladujący mleczne szkło: półprzezroczysty panel rozmywający to, co za nim, z cienkim jasnym obramowaniem. Powszechnie używany w nowoczesnych kartach, paskach i oknach.
Jak uzyskuje się efekt w CSS?
Za pomocą backdrop-filter: blur(...) rozmywającego tło, półprzezroczystego wypełnienia rgba, border-radius i jasnego obramowania rgba. Narzędzie generuje te wiersze oraz przedrostek -webkit- dla Safari.
Dlaczego tło musi być kolorowe?
Rozmycie widać tylko, gdy za panelem jest co rozmywać. Na jednolitym tle efekt znika. Dlatego podgląd umieszcza szkło na gradiencie.
Czy jest zgodny ze wszystkimi przeglądarkami?
backdrop-filter jest dobrze obsługiwany w nowych przeglądarkach (z -webkit- dla Safari). W bardzo starych przewidź nieco bardziej kryjące wypełnienie zapasowe dla czytelności.