Generator Cienia Tekstu
Design CSS text-shadow effects with multiple layers. Adjust offset, blur, color for each shadow layer.
Najwazniejsze funkcje
- Obsługa wielu warstw cienia
- Kontrola przesunięcia, rozmycia i koloru dla każdej warstwy
- Gotowe efekty (neon, wytłoczenie, retro, 3D)
- Edytowalny tekst podglądu
Guide
Właściwość CSS text-shadow dodaje warstwy cienia za znakami tekstu. Służy zarówno celom funkcjonalnym, jak i dekoracyjnym: poprawia czytelność tekstu na zatłoczonych tłach, tworzy głębię i wymiar, produkuje efekty neonowego blasku, buduje retro i vintage style typograficzne oraz dodaje subtelny poler nagłówkom i tekstowi prezentacyjnemu. Ten przewodnik omawia składnię, techniki warstwowania, powszechne efekty, kwestie wydajności i praktyczne wzorce projektowe. Składnia text-shadow przyjmuje dwie do czterech wartości plus opcjonalny kolor: text-shadow: offset-x offset-y blur-radius color. Wartość offset-x przesuwa cień w poziomie (dodatnia przesuwa w prawo, ujemna w lewo). Wartość offset-y przesuwa cień w pionie (dodatnia przesuwa w dół, ujemna w górę). Wartość blur-radius kontroluje, jak rozmyty jest cień (0 tworzy ostrą krawędziową kopię, wyższe wartości tworzą bardziej miękkie cienie). Wartość color ustawia kolor cienia (domyślnie kolor tekstu, jeśli pominięta). Przykład: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0,5) tworzy miękki ciemny cień przesunięty w dół i w prawo. Wiele cieni jest oddzielonych przecinkami, a każdy cień jest renderowany w kolejności (pierwszy cień na górze). Ta zdolność warstwowania umożliwia złożone efekty. text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666 tworzy efekt stosowanego 3D z trzema warstwami cienia przy rosnących przesunięciach. Pierwszy cień (najbliżej tekstu) jest najciemniejszy, a każdy kolejny jest jaśniejszy, symulując głębię. Nie ma limitu liczby cieni, które możesz ułożyć w stos, choć wydajność spada przy bardzo wysokich liczbach (ogólnie powyżej 10 do 15 rozmytych warstw). Promień rozmycia determinuje typ cienia. Promień rozmycia 0 tworzy twardą kopię tekstu, przydatną do efektów wytłaczania 3D, obrysów i ułożonych w stos cieni. Mały promień rozmycia (1px do 3px) tworzy subtelny, ciasny cień odpowiedni do poprawy czytelności tekstu. Średni promień rozmycia (4px do 8px) tworzy widoczny, ale miękki cień do akcentowania nagłówków. Duży promień rozmycia (10px do 30px) tworzy efekt blasku, gdzie cień rozchodzi się daleko poza obrys tekstu. Bardzo duże promienie rozmycia (40px+) tworzą efekty blasku otoczenia. Algorytm rozmycia to rozmycie gaussowskie, co oznacza, że intensywność cienia spada płynnie od środka. Cienie czytelności to najbardziej praktyczne zastosowanie. Gdy tekst leży na fotografii, gradiencie lub wzorzystym tle, subtelny cień poprawia czytelność bez dodawania stałego podłoża. Dla jasnego tekstu na zróżnicowanych tłach: text-shadow: 0 1px 3px rgba(0, 0, 0, 0,6). Dla ciemnego tekstu na zróżnicowanych tłach: text-shadow: 0 1px 3px rgba(255, 255, 255, 0,8). Kluczem jest utrzymywanie małych przesunięć (0 do 1px) i miękkiego rozmycia (2px do 4px), by cień wspierał tekst bez bycia zauważanym jako sam element wizualny. Ta technika jest powszechnie stosowana w sekcjach hero, tekście banerów i każdym tekście nakładającym się na obrazy. Kierunek przesunięć cienia komunikuje źródło światła. Cień przesunięty w dół-prawo (dodatnie x, dodatnie y) implikuje źródło światła w lewym górnym rogu, co jest najpowszechniejszą konwencją w projektowaniu UI i odpowiada temu, jak postrzegamy fizyczne obiekty oświetlone z góry. Cień przesunięty prosto w dół (0 x, dodatnie y) implikuje nastrożone źródło światła. Spójny kierunek cienia we wszystkich elementach na stronie utrzymuje iluzję ujednoliconego źródła światła. Mieszanie kierunków cienia (jeden element zacieniony w prawo, drugi w lewo) tworzy niespójność wizualną. Efekty neonowego blasku używają dużych promieni rozmycia z jasnymi, nasyconymi kolorami. Technika warstwi wiele cieni przy zerowym przesunięciu z rosnącymi promieniami rozmycia. Podstawowy efekt neonu: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa. Wewnętrzne cienie są białe (symulując jasny rdzeń neonowej tuby), a zewnętrzne cienie używają koloru blasku. Ustaw kolor tekstu na biały, a tło na ciemne (prawie czarne) dla pełnego efektu neonu. Paruj z fontem o cienkich kreścieniach (jak font monoline lub script), by naśladować rzeczywiste szyldy neonowe. Migotanie neonu można dodać animacjami CSS, które cyklują między nieco różnymi konfiguracjami cienia. Animacja klatek kluczowych, która przemienia między pełnym zestawem cieni a zredukowaną wersją (mniej warstw, niższe promienie rozmycia) co 0,1 do 0,5 sekundy, tworzy przekonujące migotanie. Dodaj wariacje wyczucia czasu animacji (steps(), losowo wyglądające długości), by migotanie brzmiało naturalnie, a nie mechanicznie. Ten efekt jest popularny dla landing page'y w stylu retro, interfejsów gier i stron portfolio. Efekty wytłaczania 3D tworzą iluzję głębi przez ułożenie w stos twardych cieni przy progresywnych przesunięciach. Podstawowy efekt tekstu 3D: text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555. Każda warstwa jest o piksel dalej od tekstu, budując wytłaczany wygląd. Dla bardziej dopracowanego efektu przyciemnij każdą następną warstwę: text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%). Dodanie miękkiego cienia po twardych warstwach (5px 5px 10px rgba(0,0,0,0,4)) uziemia tekst 3D rzuconym cieniem. Efekty długiego cienia rozciągają koncepcję wytłaczania 3D na znacznie więcej warstw, tworząc cienie, które ciągną się przez tło. Długi cień może ułożyć w stos 50 lub więcej warstw, każda przesunięta o 1px z stopniowo zanikającym kolorem. Generowanie ich ręcznie jest niepraktyczne. Użyj preprocesora CSS (Sass lub Less) z pętlą, by generować warstwy cienia programowo. W Sass: $shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0,5 - $i * 0,01)), comma); } text-shadow: $shadow. Rezultatem jest dramatyczny diagonalny cień ciągnący się za tekstem. Efekty obrysu (stroke) używają wielu twardych cieni przy zerowych lub małych przesunięciach, by stworzyć obrys tekstu. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 umieszcza ostre cienie we wszystkich czterech narożnikach diagonalnych, otaczając tekst 1px obrysem. Dla bardziej kompletnego obrysu dodaj cienie w kierunkach głównych też: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000. Dla grubszego obrysu zwiększ przesunięcia do 2px i dodaj pozycje pośrednie. Zauważ, że CSS ma też -webkit-text-stroke do obrysów tekstu, który zapewnia gładsze rezultaty, ale działa tylko w przeglądarkach WebKit/Blink. Podejście text-shadow jest bardziej powszechnie obsługiwane. Efekty tekstu retro i vintage łączą text-shadow ze specyficznymi fontami i paletami kolorów. Efekt letterpress (wytłoczony) używa ciemnego cienia nieco powyżej i jasnego cienia nieco poniżej: text-shadow: 0 -1px 0 rgba(0, 0, 0, 0,5), 0 1px 0 rgba(255, 255, 255, 0,3). Zastosuj to do szarego tekstu na średnio szarym tle. Ciemny cień powyżej sugeruje, że tekst jest wciśnięty w powierzchnię, podczas gdy jasny cień poniżej łapie światło na dolnej krawędzi. Efekt raised (wytłoczony) odwraca cienie: jasny na górze, ciemny na dole. Oba efekty działają najlepiej z cięższymi wagami fontów i wyciszonymi paletami kolorów. Efekty tekstu ogniowego, lodowego i elementarnego warstwią wiele cieni z gradientami kolorów. Efekt ognia może użyć: text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e. Każda warstwa porusza się w górę (ujemne y-offset) z rosnącym rozmyciem, przechodząc od jasnego żółtego u podstawy przez pomarańczowy do ciemnoczerwonego, symulując płomień. Efekt lodu używa tej samej techniki z niebieskimi i białymi tonami, z cieniami ciągnącymi się w dół. Te dekoracyjne efekty najlepiej zarezerwować dla nagłówków w kreatywnych projektach, interfejsach gier i materiałach promocyjnych. Wydajność text-shadow jest ogólnie dobra dla typowych zastosowań (jedna do trzech warstw cienia). Każda warstwa cienia wymaga od przeglądarki wyrenderowania dodatkowej kopii tekstu z określonym kolorem, przesunięciem i rozmyciem. Twarde cienie (blur-radius: 0) są tanie, bo są prostymi kopiami przesunięcia. Rozmyte cienie są droższe, bo przeglądarka musi obliczyć rozmycie gaussowskie dla każdej warstwy. Ułożenie w stos 8+ rozmytych cieni (jak w efektach neonowych) na dużym tekście, który jest animowany lub na często przerysowywanym obszarze, może wpływać na liczbę klatek na urządzeniach niższej klasy. Dla animowanego tekstu z ciężkimi cieniami testuj na urządzeniach docelowych i rozważ redukcję liczby cieni na mobile. Animowanie text-shadow z przejściami CSS tworzy angażujące efekty hover. Powszechny wzorzec przechodzi od braku cienia do widocznego cienia na hover: transition: text-shadow 0,3s ease. Animowanie między dwoma złożonymi wielowarstwowymi cieniami działa, ale wymaga, by oba stany miały tę samą liczbę warstw cienia. Jeśli stan początkowy ma trzy warstwy, a stan hover pięć warstw, przejście nie będzie interpolować płynnie dla dodatkowych warstw (pojawią się, zamiast wyblaknąć). Utrzymuj spójne liczby warstw między stanami animacji dla płynnych przejść. Text-shadow z niestandardowymi właściwościami CSS umożliwia tematyzowane, łatwe w utrzymaniu efekty. Zdefiniuj swoje cienie jako niestandardowe właściwości: --shadow-heading: 2px 2px 4px rgba(0,0,0,0,3). Odwołuj się do nich w swoich stylach: text-shadow: var(--shadow-heading). W trybie ciemnym przedefiniuj właściwość: --shadow-heading: 2px 2px 8px rgba(0,0,0,0,7) (silniejszy cień potrzebny na ciemnych tłach dla tego samego efektu wizualnego). To podejście utrzymuje wartości cienia w jednym miejscu i czyni przełączanie motywów trywialnym. Możesz też tworzyć tokeny cienia na poziomie komponentów: --shadow-btn-hover, --shadow-heading-hero, --shadow-text-overlay. Relacja między text-shadow a wyborem fontu ma znaczące znaczenie. Cienkie, lekkie fonty produkują delikatne cienie, które mogą wyglądać elegancko. Pogrubione, ciężkie fonty produkują grube, wybitne cienie, które domagają się uwagi. Fonty script i dekoracyjne mogą produkować zagracone cienie, gdzie nakładające się warstwy cienia sąsiadujących znaków zakłócają się nawzajem. Fonty monospace produkują czyste, równe cienie, bo ich spójna szerokość znaku tworzy jednorodne odstępy cienia. Testuj swój efekt cienia ze swoim rzeczywistym fontem w swoim rzeczywistym rozmiarze. Efekt, który wygląda świetnie na przykładowym słowie, może wyglądać nieporządnie w pełnym zdaniu. Text-shadow na różnych typach tła wymaga różnych podejść. Na jednolitych tłach masz pełną kontrolę i możesz użyć dowolnej techniki cienia. Na tłach gradientowych upewnij się, że kolor cienia działa na całym zakresie gradientu. Na obrazach używaj cieni, które tworzą kontrast niezależnie od tego, jaka część obrazu leży za tekstem (podejście cienia czytelności działa tu najlepiej). Na przezroczystych lub półprzezroczystych tłach (efekty szkła) text-shadow jest często istotny dla utrzymania czytelności, bo kolor tła się waha. Dla ciemnych tł używaj jaśniejszych kolorów cienia lub efektów blasku. Dla jasnych t używaj standardowych ciemnych cieni. Text-shadow wchodzi w interakcję z text-decoration w specyficzny sposób. Podkreślenia, nadkreślenia i przekreślenia nie otrzymują cieni. Cień ma zastosowanie tylko do samych kształtów glifów. Jeśli potrzebujesz cieniowanego tekstu z cieniowanym podkreśleniem, użyj pseudo-elementu lub border-bottom do podkreślenia i zastosuj własny box-shadow. Podobnie text-shadow nie wpływa na kolor podświetlenia zaznaczenia (pseudo-element ::selection). Cień pozostaje widoczny za zaznaczonym tekstem, co może tworzyć dziwne efekty wizualne z pewnymi kombinacjami kolorów. Text-shadow w projektowaniu responsywnym powinien skalować się z rozmiarem fontu. Cień 2px, który wygląda odpowiednio na nagłówku 48px, staje się nieproporcjonalnie duży na nagłówku 24px na mobile. Używaj jednostek em zamiast px dla wartości cienia, by utrzymać proporcjonalne skalowanie: text-shadow: 0,04em 0,04em 0,08em rgba(0, 0, 0, 0,3). Ten cień skaluje się z rozmiarem fontu, utrzymując tę samą proporcję wizualną niezależnie od rzeczywistego renderowanego rozmiaru. Dla responsywnych klas narzędzi definiuj warianty cienia dla różnych poziomów nagłówków. CSS text-shadow w porównaniu do efektów tekstu SVG i renderowania tekstu na canvas różni się możliwościami i wydajnością. SVG oferuje bardziej dopracowane efekty tekstu przez filtry, maski, gradienty i wzory aplikowane do elementów tekstowych. Canvas zapewnia kontrolę na poziomie pikseli nad renderowaniem tekstu z właściwościami shadowBlur, shadowColor i shadowOffsetX/Y. CSS text-shadow to najprostsza i najbardziej wydajna opcja dla tekstu webowego. Używaj CSS do standardowych efektów cienia. Sięgnij po SVG, gdy potrzebujesz efektów wykraczających poza to, co oferują cienie CSS. Canvas jest odpowiedni do dynamicznego, opartego na danych renderowania tekstu jak wykresy i wizualizacje. Łączenie text-shadow z innymi właściwościami tekstu CSS tworzy warstwowe efekty. Text-shadow plus background-clip: text (z -webkit-background-clip: text) plus tło gradientowe tworzy tekst z wypełnieniem gradientowym i cieniem. Text-shadow plus mix-blend-mode na elemencie nadrzędnym tworzy mieszane efekty cienia, gdzie cień wchodzi w interakcję z tłem w oparciu o tryb mieszania. Text-shadow plus filter: drop-shadow() na elemencie nadrzędnym tworzy cień zacieniowanego tekstu, podwajając efekt głębi. Te kombinacje są potężne, ale wymagają testowania między przeglądarkami, bo obsługa się różni. Text-shadow w klientach poczty e-mail ma ograniczone, ale użyteczne wsparcie. Większość nowoczesnych klientów poczty (Gmail, Apple Mail, Outlook na Mac, Yahoo Mail) obsługuje podstawowy text-shadow. Outlook na Windows (który używa silnika renderowania Worda) nie obsługuje text-shadow. W projektowaniu e-maili używaj text-shadow jako progresywnego ulepszenia: e-mail wygląda dobrze bez niego i lepiej z nim. Utrzymuj efekty proste (jednowarstwowe, małe przesunięcie, skromne rozmycie), bo wielowarstwowe cienie, które wyglądają świetnie w sieci, mogą renderować się nieprzewidywalnie w klientach poczty. Arkusze stylów druku powinny zazwyczaj usuwać text-shadow. Cienie dodają wizualną wagę na ekranie, ale mogą wyglądać mętnie w druku, zwłaszcza na drukarkach atramentowych. Użyj @media print { * { text-shadow: none; } }, by usunąć wszystkie cienie tekstu w wydruku. Jeśli konkretne cienie służą celom funkcjonalnym w druku (jak zapewnienie kontrastu tekstu na kolorowym tle), zachowaj je selektywnie, usuwając cienie dekoracyjne. Różnice renderowania w przeglądarkach w text-shadow są drobne, ale istnieją. Przeglądarki oparte na Chromium, Firefox i Safari wszystkie obsługują text-shadow z identyczną składnią, ale mogą renderować rozmycie nieco inaczej. Firefox ma tendencję do produkowania ciaśniejszych promieni rozmycia niż Chrome dla tej samej wartości. Safari może obsługiwać bardzo duże wartości rozmycia inaczej w skrajnych przypadkach. Te różnice rzadko są zauważalne w praktycznym użyciu, ale mogą mieć znaczenie dla projektów pixel-perfect. Jeśli dokładny wygląd cienia ma znaczenie, testuj we wszystkich przeglądarkach docelowych i dostosowuj wartości wg przeglądarki używając zapytań o funkcje CSS lub detekcji user agenta jako ostateczności. Wydajność text-shadow w frameworkach CSS może być zarządzana przez klasy narzędzi. Tailwind CSS zapewnia narzędzia shadow, które dobrze działają dla box-shadow, ale wymaga niestandardowej konfiguracji dla text-shadow. Dodaj narzędzia text-shadow do swojej konfiguracji Tailwind: rozszerz motyw wartościami textShadow i utwórz wtyczkę, która generuje odpowiadające klasy narzędzi. To daje Ci klasy jak text-shadow-sm, text-shadow-md, text-shadow-lg i text-shadow-glow, które utrzymują spójność w projekcie bez powtarzalnych stylów inline. Generowanie wartości text-shadow programowo jest konieczne dla efektów z wieloma warstwami. Funkcja JavaScript, która generuje efekt wytłaczania 3D: const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', '). Dla efektów neonu funkcja może generować koncentryczne warstwy blasku z rosnącym rozmyciem: const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', '). Przechowywanie tych wygenerowanych wartości w niestandardowych właściwościach CSS (--shadow-3d, --shadow-neon) utrzymuje CSS czystym, podczas gdy JavaScript obsługuje złożoną logikę generowania. Text-shadow z fontami zmiennymi tworzy interesujące możliwości. Ponieważ fonty zmienne pozwalają na płynne przejścia wagi, połączenie animowanej wagi fontu z odpowiednio animowanym text-shadow tworzy tekst, który wydaje się rosnąć w ciężarze i rzucać głębszy cień jednocześnie. Ustaw obie właściwości w przejściu lub animacji CSS: przejście font-weight od 400 do 700, podczas przejścia text-shadow od 1px 1px 2px rgba(0,0,0,0,2) do 2px 2px 6px rgba(0,0,0,0,4), produkuje spójną animację wagi i głębi. Rozważania dostępności dla text-shadow są proste: cienie nie mogą redukować czytelności tekstu. Powszechnym błędem jest używanie koloru tekstu, który polega na swoim cieniu dla kontrastu. Jeśli cień nie wyrenderuje się (starsi klienci poczty, niektóre narzędzia dostępności, arkusze stylów druku), tekst musi nadal być czytelny na swoim tle na własnych zasługach. Używaj text-shadow do ulepszania czytelności, nie do jej tworzenia. Bazowy kolor tekstu powinien przejść wymagania kontrastu WCAG względem tła niezależnie od jakiegokolwiek cienia. Tryb wysokiego kontrastu w Windows usuwa text-shadow całkowicie, więc Twój projekt musi działać bez niego. Generator text-shadow pozwala Ci wizualnie dodawać, usuwać i konfigurować wiele warstw cienia, dostosowując przesunięcie, rozmycie i kolor dla każdej warstwy, widząc rezultat w czasie rzeczywistym. To wizualne podejście jest szybsze niż ręczne kodowanie cieni wielowarstwowych, szczególnie dla złożonych efektów jak neonowe blaski czy wytłoczenia 3D, gdzie interakcja między warstwami determinuje ostateczny wygląd. Skopiuj wygenerowany CSS do swojego arkusza stylów i dostosuj według potrzeb dla swojego konkretnego kontekstu.
Czeste pytania
Czy mogę dodać wiele cieni tekstu?
Tak, możesz dodawać nieograniczone warstwy cienia. Każda warstwa może mieć własne przesunięcie, promień rozmycia i kolor.
Jak text-shadow wpływa na wydajność?
Cienie tekstu są akcelerowane sprzętowo GPU w nowoczesnych przeglądarkach i mają minimalny wpływ na wydajność przy typowym użyciu.
