Zrób matowe szkło. Bez Photoshopa.
Make frosted glass. No Photoshop needed.
Ustaw rozmycie tła, przezroczystość i odcień, a zobaczysz efekt szkła bezpośrednio na kolorowym
tle. Skopiuj gotowy backdrop-filter — działa w całości w przeglądarce.
Set the background blur, opacity, and tint, and see the frosted-glass effect live on a colorful
backdrop. Copy the finished backdrop-filter — it all runs in your browser.
background: rgba(255,255,255,.22); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,.35); border-radius: 18px;
Ustaw rozmycie
Set the blur
Zwiększ rozmycie tła, żeby to, co znajduje się pod elementem, przestało być ostre, ale zachowało kształt.
Increase the background blur so whatever sits behind the element loses sharpness but keeps its shape.
Dobierz krycie i obramowanie
Tune fill and border
Niskie krycie tła i delikatne, jasne obramowanie dają klasyczny efekt matowego szkła.
Low fill opacity plus a subtle, light border gives the classic frosted-glass look.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej cztery gotowe właściwości do klasy swojego panelu lub karty.
Click "Copy" and paste the four ready properties into your panel or card class.
- Panele nawigacyjne i paski boczne nad zdjęciami tła.
- Karty cenowe i modale w stylu "frosted glass".
- Nakładki na wideo z czytelnym tekstem bez ciemnienia całego kadru.
- Navigation panels and sidebars over photo backgrounds.
- Pricing cards and modals in a "frosted glass" style.
- Video overlays with readable text without darkening the whole frame.
Czym jest ten generator? To wizualne narzędzie do budowania
efektu matowego szkła w CSS przy pomocy backdrop-filter, bez potrzeby przygotowywania
rozmytego obrazka w edytorze graficznym.
What is this tool? A visual way to build a frosted-glass effect
in CSS using backdrop-filter, with no need to prepare a blurred image in a graphics editor.
Czym jest glassmorphism?
What is glassmorphism?
Glassmorphism to styl interfejsu, w którym elementy wyglądają jak matowe szkło — półprzezroczyste tło, rozmyta zawartość pod spodem i cienkie, jasne obramowanie.
Glassmorphism is a UI style where elements look like frosted glass — a semi-transparent fill, blurred content underneath, and a thin, light border.
Czy backdrop-filter działa we wszystkich przeglądarkach?
Does backdrop-filter work in every browser?
Jest wspierany przez wszystkie aktualne przeglądarki, choć w starszych wersjach Firefoksa bywał domyślnie wyłączony — warto zostawić awaryjne, kryjące tło jako fallback.
It's supported by all current browsers, though older Firefox versions sometimes had it disabled by default — it's worth keeping a solid fallback background as a safety net.
Dlaczego mój panel nie wygląda jak szkło?
Why doesn't my panel look like glass?
Efekt działa tylko wtedy, gdy pod elementem coś realnie się znajduje — zdjęcie, gradient albo inna treść. Na jednolitym, płaskim tle rozmycie nie ma czego pokazać.
The effect only shows when there's actually something behind the element — a photo, a gradient, or other content. On a flat, solid background, blur has nothing to reveal.
Jak dobrać kontrast tekstu na szklanym panelu?
How do I keep text readable on a glass panel?
Dodaj lekki text-shadow albo zwiększ krycie tła, jeśli tekst zlewa
się z tłem pod spodem — czytelność jest ważniejsza niż sam efekt.
Add a light text-shadow or increase the fill opacity if the text
blends into the backdrop — readability matters more than the effect itself.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce — ustawienia i skopiowany CSS zostają lokalnie.
No. The generator runs entirely in your browser — your settings and copied CSS stay local.
Czym jest CSS Glassmorphism Generator?
Glassmorphism to jeden z bardziej rozpoznawalnych trendów wizualnych ostatnich lat — panele
wyglądające jak przymglone szkło leżące nad kolorowym tłem. Efekt opiera się na jednej
właściwości CSS, backdrop-filter, która rozmywa i modyfikuje wszystko, co znajduje
się pod elementem, zamiast rozmywać sam element.
Z czego składa się efekt szkła
Cztery właściwości pracują razem: backdrop-filter: blur() rozmywa tło pod
elementem, saturate() podbija nasycenie kolorów widocznych przez szkło,
półprzezroczysty background nadaje mleczny odcień, a cienkie, jasne
border imituje odbicie światła na krawędzi szkła.
Kiedy efekt działa, a kiedy nie
- Potrzebujesz realnej treści pod panelem — zdjęcia, gradientu, wideo.
- Zbyt wysokie krycie tła zabija efekt szkła, zamieniając go w zwykłą, półprzezroczystą kartę.
- Zbyt niskie krycie utrudnia czytanie tekstu umieszczonego na panelu.
Praktyczne wskazówki
Zacznij od rozmycia w okolicach 10–15px — to wartość, która czyta się jako "szkło", a nie jako "błąd renderowania". Nasycenie w granicach 150–200% ożywia kolory pod spodem, ale powyżej 250% obraz zaczyna wyglądać sztucznie jaskrawo. Testuj panel na różnych tłach, bo ten sam zestaw wartości inaczej wygląda na jasnym zdjęciu, a inaczej na ciemnym gradiencie.
Wdrożenie w produkcji
Pamiętaj o prefiksie -webkit-backdrop-filter dla starszego Safari oraz o
zapasowym, kryjącym tle na wypadek przeglądarek bez wsparcia dla backdrop-filter —
panel powinien pozostać czytelny nawet bez efektu rozmycia.
What is a CSS Glassmorphism Generator?
Glassmorphism is one of the more recognizable visual trends of recent years — panels that
look like frosted glass sitting over a colorful background. The effect rests on a single CSS
property, backdrop-filter, which blurs and modifies whatever is behind an element
instead of blurring the element itself.
What makes up the glass effect
Four properties work together: backdrop-filter: blur() blurs the backdrop,
saturate() boosts the color intensity seen through the glass, a semi-transparent
background gives it a milky tint, and a thin, light border mimics
light catching the glass edge.
When the effect works, and when it doesn't
- You need real content behind the panel — a photo, a gradient, a video.
- Too much fill opacity kills the glass effect, turning it into a plain translucent card.
- Too little fill opacity makes text on the panel hard to read.
Practical tips
Start with a blur around 10–15px — that reads as "glass" rather than "rendering glitch". Saturation between 150–200% brings the backdrop colors to life, but past 250% the image starts to look artificially vivid. Test the panel on several backdrops, since the same values look different on a bright photo than on a dark gradient.
Using it in production
Remember the -webkit-backdrop-filter prefix for older Safari, and a solid
fallback background for browsers without backdrop-filter support — the panel
should stay readable even without the blur effect.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Gradienty, cienie, zaokrąglenia i przyciski — wszystko w jednym miejscu, bez instalacji.
Gradients, shadows, border radius, and buttons — all in one place, no install needed.