TL
Tool Lab
💰Donate
💰Donate

Generator Cienia Tekstu CSS

Projektuj wizualnie efekty CSS text-shadow z wieloma warstwami. Dostosuj offset, rozmycie, kolor i przezroczystość. Kopiuj CSS natychmiast.

Tool Lab
Tekst podglądu
Rozmiar czcionki — 48px
Kolor tekstu
Kolor tła
Warstwy cienia (1)
Przesunięcie X
Przesunięcie Y
Rozmycie
Kolor
Krycie — 30%
Wygenerowany CSS
text-shadow: 2px 2px 6px rgba(0,0,0,0.30);

O tym narzędziu

Generator cieni tekstu CSS umożliwia wizualne tworzenie wielowarstwowych cieni tekstu i natychmiastowe uzyskanie wyników CSS. Każda warstwa ma niezależne sterowanie przesunięciem X/Y, promieniem rozmycia, kolorem i kryciem.

Krycie jest stosowane jako kanał alfa RGBA, zapewniając płynną przezroczystość bez sztuczek specyficznych dla przeglądarki. Wygenerowany CSS działa we wszystkich nowoczesnych przeglądarkach.

Jak używać

  1. Wybierz preset, aby rozpocząć, lub skonfiguruj warstwy ręcznie.
  2. Wpisz tekst podglądu i dostosuj rozmiar czcionki i kolory.
  3. Dodaj więcej warstw za pomocą + Dodaj warstwę dla złożonych efektów.
  4. Kliknij Kopiuj CSS, aby skopiować deklarację text-shadow bezpośrednio do arkusza stylów.

Przypadki użycia

Deweloperzy frontend tworzą nagłówki sekcji hero z głębią i wymiarem. Projektanci tworzą prototypy efektów tekstowych bezpośrednio w CSS. Zespoły marketingowe tworzą przyciągający wzrok tekst CTA z efektami świecenia i neonowymi.

Często zadawane pytania

  • Ile warstw mogę dodać?Nie ma twardego limitu. CSS obsługuje dowolną liczbę wartości text-shadow oddzielonych przecinkami. W praktyce 1-4 warstwy pokrywają większość efektów.
  • Czy text-shadow działa we wszystkich przeglądarkach?Tak. text-shadow jest w pełni obsługiwany we wszystkich nowoczesnych przeglądarkach od 2012 roku.
  • Czym jest promień rozmycia 0?Cień z ostrymi krawędziami bez rozmycia, przydatny do efektów retro lub konturowych.