Narzędzia

Generator cienia CSS (box-shadow) online – z podglądem

Twórz efekt cienia (box-shadow) suwakami i skopiuj gotowy kod CSS. Ustaw przesunięcie, rozmycie, rozproszenie, kolor i krycie – podgląd zmienia się na żywo.

Aktualizacja: 20.07.2026 • Opracował: DobryKalkulator.pl

Jak liczymy ↓ FAQ

Spis treści

Przesunięcie X 8px Przesunięcie Y 8px Rozmycie 16px Rozproszenie 0px Kolor cienia Krycie 0.3 Cień wewnętrzny (inset)

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

Jak działa kalkulator

Przesuwaj suwaki (przesunięcie X/Y, rozmycie, rozproszenie), wybierz kolor i krycie, w razie potrzeby włącz cień wewnętrzny. Podgląd aktualizuje się na bieżąco, a gotowy CSS skopiujesz przyciskiem.

Jak liczymy (metodologia i wzory)

Narzędzie składa właściwość box-shadow z wartości suwaków i stosuje ją na żywo do elementu podglądu. Kolor jest łączony z kryciem w wartość rgba().

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 cienia CSS (box-shadow) online – 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-cienia-css" src="https://dobrykalkulator.pl/embed/generator-cienia-css/" title="Generator cienia CSS (box-shadow) online – 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-cienia-css/" target="_blank" rel="noopener" style="color:#2f55d4;font-weight:600;text-decoration:none">Generator cienia CSS (box-shadow) online</a></p>
</div>
<script>(function(){var f=document.getElementById("dk-generator-cienia-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 ↗