Generator glassmorphism
Zaprojektuj przezroczystą powierzchnię i skopiuj CSS lub klasy Tailwind.
Dopasuj parametry spokojnej, czytelnej warstwy.
Blok CSS
.glass {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(15, 23, 42, 0.125);
}Klasy Tailwind
bg-white/65 backdrop-blur-[16px] backdrop-saturate-[140%] border border-white/35 rounded-[20px] shadow-[0_15px_50px_rgba(15,23,42,0.125)]
Jak używać
- Ustaw sześć suwaków wizualnych.
- Porównaj powierzchnię na różnych gradientach.
- Skopiuj CSS albo klasy Tailwind.
O tym narzędziu
Glassmorphism to warstwowy styl interfejsu łączący półprzezroczystość, rozmycie, nasycenie, jasne obramowanie, zaokrąglenie i miękki cień. O jakości efektu decyduje relacja powierzchni do tła, a nie jedna magiczna wartość rgba. Generator udostępnia główne parametry i pokazuje kartę na kilku kolorowych gradientach. Rozmycie oddziela treść od ruchliwego tła, przezroczystość przepuszcza jego kolory, nasycenie zachowuje lub wzmacnia barwy, krycie obramowania buduje krawędź, promień określa sylwetkę, a cień dodaje głębi. Wynikowy CSS zawiera backdrop-filter oraz wariant WebKit dla szerszej zgodności. Klasa Tailwind jest wygodnym punktem wyjścia, ale wartości arbitralne i składnię krycia sprawdź z wersją Tailwind w swoim projekcie. Kontrast szkła trzeba sprawdzać w jasnym i ciemnym kontekście, a tekst powinien pozostać czytelny przy zmianie tła. Filtry tła są ulepszeniem progresywnym, dlatego zapewnij odpowiedni półprzezroczysty fallback. Nie układaj wielu bardzo przezroczystych paneli, bo tworzą chaos i kosztowne compositing. Skopiuj kod, a następnie dopracuj odstępy, kolory, fokus i preferencję ograniczonego ruchu w komponencie. Generator działa lokalnie i nie zapisuje ustawień. Na końcu sprawdź obsługę klawiatury oraz kontrast w docelowym projekcie, bo estetyczny gradient nie gwarantuje dostępności. Dla starszych przeglądarek ustaw półprzezroczyste tło jako fallback bez filtra. Sprawdź też, czy duże nasycenie nie utrudnia odczytu zdjęć oraz małego tekstu. Przetestuj kilka teł, bo wygląd szkła zależy od kontrastu obrazu pod panelem.
Najczęstsze pytania
Podobne narzędzia
Kalkulator proporcji
Oblicz pasujące wymiary obrazu i filmu dla 16:9, 4:3, kwadratu, pionu, kina i własnych proporcji.
Podgląd Open Graph
Sprawdź karty Twittera, Discorda, Telegrama i LinkedIna oraz wygeneruj tagi Open Graph.
Generator placeholderów
Twórz pobierane placeholdery SVG i data URI z własnymi wymiarami, kolorami i tekstem.