Narzędzia

Generator cienia tekstu CSS (text-shadow) – z podglądem

Dodaj cień do tekstu (text-shadow) i skopiuj gotowy CSS. Reguluj przesunięcie, rozmycie, kolor i krycie z podglądem na żywo.

Aktualizacja: 20.07.2026 • Opracował: DobryKalkulator.pl

Jak liczymy ↓ FAQ

Spis treści

Przesunięcie X 2px Przesunięcie Y 2px Rozmycie 4px Kolor cienia Krycie 0.5

Przykładowy tekst

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

Jak działa kalkulator

Ustaw przesunięcie X/Y, rozmycie, kolor i krycie cienia tekstu. Podgląd napisu zmienia się na bieżąco, a CSS skopiujesz przyciskiem.

Jak liczymy (metodologia i wzory)

Narzędzie składa właściwość text-shadow z wartości suwaków (kolor łączony z kryciem w rgba) i stosuje ją na żywo do przykładowego tekstu.

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