Narzędzia

Generator glassmorphism (efekt szkła) CSS – z podglądem

Stwórz modny efekt matowego szkła (glassmorphism) i skopiuj gotowy CSS. Reguluj rozmycie tła, przezroczystość, kolor i ramkę z podglądem na żywo.

Aktualizacja: 20.07.2026 • Opracował: DobryKalkulator.pl

Jak liczymy ↓ FAQ

Spis treści

Rozmycie tła 10px Kolor tafli Krycie tła 0.15 Zaokrąglenie 16px Widoczność ramki 0.25

Panel szkła

🔒 Generujesz kod lokalnie w przeglądarce. Skopiuj gotowy CSS i wklej do swojego arkusza stylów.

Jak działa kalkulator

Ustaw rozmycie tła (backdrop-filter), krycie i kolor tafli, zaokrąglenie oraz widoczność ramki. Podgląd panelu na kolorowym tle zmienia się na bieżąco.

Jak liczymy (metodologia i wzory)

Narzędzie składa zestaw właściwości: półprzezroczyste tło rgba(), backdrop-filter: blur(), zaokrąglenie i subtelną ramkę. Efekt wymaga obsługi backdrop-filter w przeglądarce.

FAQ

Czy muszę coś instalować?

Nie. Narzędzie działa w przeglądarce – ustaw suwaki i skopiuj gotowy kod CSS.

Czy podgląd odpowiada realnemu wyglądowi?

Tak – podgląd stosuje dokładnie ten sam CSS, który kopiujesz.

Założenia i ograniczenia

Prywatność: kod generowany jest lokalnie w przeglądarce.
Skopiuj CSS i wklej do własnego arkusza stylów.

Umieść ten kalkulator na swojej stronie

Skopiuj kod i wklej go w swoim artykule, kalkulator zadziała u Ciebie, a pod nim pojawi się link do źródła. Za darmo, bez rejestracji.

Motyw:

<!– Kalkulator Generator glassmorphism (efekt szkła) CSS – z podglądem – dobrykalkulator.pl –>
<div style="max-width:680px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.10);background:#ffffff">
  <iframe id="dk-generator-glassmorphism-css" src="https://dobrykalkulator.pl/embed/generator-glassmorphism-css/" title="Generator glassmorphism (efekt szkła) CSS – z podglądem" loading="lazy" style="width:100%;height:720px;border:0;display:block"></iframe>
  <p style="margin:0;padding:10px 14px;background:#ffffff;border-top:1px solid #edf0f4;font:13px system-ui,sans-serif;color:#5a6577">Źródło: <a href="https://dobrykalkulator.pl/generator-glassmorphism-css/" target="_blank" rel="noopener" style="color:#2f55d4;font-weight:600;text-decoration:none">Generator glassmorphism (efekt szkła) CSS</a></p>
</div>
<script>(function(){var f=document.getElementById("dk-generator-glassmorphism-css");window.addEventListener("message",function(e){if(f&&e.source===f.contentWindow&&e.data&&e.data.dkEmbed&&e.data.height)f.style.height=e.data.height+"px";});})();</script>

Podgląd widgetu ↗