Generator Text Shadow - Cień i Obrys Tekstu CSS

Text-shadow CSS: cień i obrys napisu z podglądem

Biały napis na czerwonym przycisku #ef4444 ma kontrast tylko 3,76:1, za mało dla zwykłego tekstu według WCAG. Cienki czarny obrys z ośmiu cieni podnosi kontrast krawędzi liter do 5,58:1. Generator robi jedno i drugie: zwykły cień tekstu z przesunięciem i rozmyciem albo obrys złożony z kopii bez rozmycia rozłożonych wokół liter. Pokazuje podgląd na wybranym tle, kod text-shadow, klasę Tailwind CSS v4 i kontrast policzony wzorem WCAG.

3 długości

x, y i rozmycie, bez rozciągnięcia

4,5:1

minimalny kontrast zwykłego tekstu

3:1

dla tekstu od 24 px albo 18,67 px pogrubionego

8 kopii

domyślny obrys, co 45°

Jak zrobić cień albo obrys tekstu - krok po kroku

Efekt - cień (przesunięty i rozmyty) albo obrys tekstu z kilku cieni bez rozmycia.
Przesunięcie i rozmycie - dla cienia. Typowy cień nagłówka to 1-2 px w dół i 2-4 px rozmycia.
Grubość obrysu i liczba kierunków - dla obrysu. 1-2 px i 8 kierunków wystarcza na większość napisów, 16 daje gładsze łuki kosztem dłuższego kodu.
Kolor i krycie - kolor szesnastkowo. Puste krycie: 50 % dla cienia, 100 % dla obrysu.
Tekst, kolor tekstu, tło, rozmiar i grubość pisma - do podglądu i do oceny kontrastu. Od rozmiaru i grubości zależy, czy obowiązuje próg 4,5:1, czy 3:1.
Albo wklej wartość - gotowe text-shadow z arkusza, do 32 warstw. Wklejka ma pierwszeństwo przed polami efektu.
Odczytaj wynik - kod CSS, klasa Tailwind, zasięg cienia poza litery i kontrast: tekstu z tłem, obrysu z tłem (gdy obrys jest wąski) oraz tekstu z obrysem (gdy obrys jest szeroki).

Czym cień tekstu różni się od cienia elementu

Specyfikacja W3C CSS Text Decoration Level 3 każe czytać wartości text-shadow tak samo jak box-shadow, z dwoma wyjątkami: nie ma rozciągnięcia i nie ma słowa inset. Zostają dwie albo trzy długości i kolor. Czwarta liczba albo inset unieważniają całą deklarację, dlatego generator odrzuca je we wklejce z wyjaśnieniem, zamiast po cichu ignorować.

Brak rozciągnięcia to powód, dla którego obrys robi się z kilku kopii. Każda kopia jest ostra (rozmycie 0) i przesunięta o grubość obrysu w innym kierunku. Generator rozkłada je równo na okręgu: przy 8 kierunkach i grubości 2 px kopie ukośne mają przesunięcie 1,41 px w obu osiach, bo tyle wynosi 2 × cos 45° po zaokrągleniu do setnych.

Są też różnice w zachowaniu. text-shadow dziedziczy się na elementy potomne, a box-shadow nie. Cień tekstu nie jest przycinany do kształtu liter, więc przy półprzezroczystym tekście prześwituje przez litery. Obejmuje również podkreślenia i inne dekoracje tekstu. Tak jak box-shadow nie zmienia układu strony.

Cienie tekstu w Tailwind CSS v4

Pięć zestawów z pliku theme.css. Zasięg poza litery policzono generatorem po wklejeniu każdej wartości. Inne wartości generator zapisuje jako text-shadow-[...].

Klasa	Wartość text-shadow	Warstwy	Zasięg: góra / bok / dół
text-shadow-2xs	0px 1px 0px rgb(0 0 0 / 0.15)	1	0 / 0 / 1 px
text-shadow-xs	0px 1px 1px rgb(0 0 0 / 0.2)	1	0 / 1 / 2 px
text-shadow-sm	0px 1px 0px, 0px 1px 1px, 0px 2px 2px, każda rgb(0 0 0 / 0.075)	3	0 / 2 / 4 px
text-shadow-md	0px 1px 1px, 0px 1px 2px, 0px 2px 4px, każda rgb(0 0 0 / 0.1)	3	2 / 4 / 6 px
text-shadow-lg	0px 1px 2px, 0px 3px 2px, 0px 4px 8px, każda rgb(0 0 0 / 0.1)	3	4 / 8 / 12 px

Biały napis na kolorowym tle: kiedy pomaga obrys

Kontrast liczony wzorem WCAG 2.2 dla białego tekstu 16 px (próg 4,5:1) i dla cienkiego czarnego obrysu na tym samym tle. Według uwagi 5 do kryterium 1.4.3 wąska obwódka liter liczy się jako część litery, a szeroka, która wypełnia wnętrza liter, jako tło.

Tło	Biały tekst	Czarny obrys	Co zrobić
#1e293b (granat)	14,63:1	1,44:1	wystarczy sam tekst
#2563eb (niebieski)	5,17:1	4,06:1	wystarczy sam tekst
#64748b (szary)	4,76:1	4,41:1	wystarczy sam tekst, z małym zapasem
#ef4444 (czerwony)	3,76:1	5,58:1	tekst za słaby, obrys pomaga
#16a34a (zielony)	3,3:1	6,37:1	tekst za słaby, obrys pomaga
#94a3b8 (jasny szary)	2,56:1	8,19:1	tekst za słaby, obrys pomaga
#f59e0b (pomarańczowy)	2,15:1	9,78:1	tekst za słaby, obrys pomaga
#ffffff (biały)	1:1	21:1	bez obrysu napisu nie widać

Na granatowym i niebieskim tle czarny obrys słabo odcina się od tła, ale nie jest potrzebny, bo biały tekst ma tam wystarczający kontrast sam. Obrys ratuje jasne i nasycone tła, na których biel się rozmywa.

Pięć faktów o text-shadow ze specyfikacji i WCAG

Kolejność cieni się odwróciła. Specyfikacja zaznacza, że kolejność rysowania z rekomendacji CSS2 była odwrotna. Dziś pierwszy cień z listy leży na wierzchu, tak jak w box-shadow.

Cień dziedziczy się w dół drzewa. Nadany na sekcji obejmie każdy akapit, link i przycisk w środku, chyba że ustawisz im text-shadow: none.

Działa na pierwszej literze i pierwszym wierszu. text-shadow można nadać pseudoelementom ::first-letter i ::first-line, np. tylko inicjałowi akapitu.

Próg we wzorze WCAG się zmienił. W starszej wersji definicji luminancji względnej stała wynosiła 0,03928, obecnie 0,04045. WCAG zaznacza, że w praktyce nie zmienia to wyników obliczeń kontrastu.

Szary #767676 to granica. Na białym tle daje 4,54:1, czyli tuż powyżej progu 4,5:1. Jaśniejszy o jeden krok w każdym kanale #777777 ma już 4,48:1 i nie przechodzi.

Kto korzysta z generatora cieni tekstu

Projektant strony z hero na zdjęciu - sprawdzi, czy biały nagłówek na jasnym fragmencie zdjęcia potrzebuje obrysu, i skopiuje gotową regułę.

Programista frontendu - wklei text-shadow z cudzego kodu, zobaczy warstwy i zamieni je na klasę Tailwind, jeśli pasuje do zestawu.

Twórca miniatur i banerów w HTML - zrobi obrys napisu bez programu graficznego, w czystym CSS.

Osoba sprawdzająca dostępność - porówna kontrast tekstu z tłem i obrysu z tłem z progami WCAG dla zwykłego i dużego tekstu.

Pytania o text-shadow

Jak zrobić obrys tekstu w CSS?

Najprostszy sposób zgodny ze standardem to kilka cieni bez rozmycia przesuniętych w różne strony. Wybierz w generatorze efekt „Obrys tekstu”, grubość, np. 1,5 px, i liczbę kierunków. Przy 8 kierunkach dostajesz 8 warstw po przecinku.

Czy text-shadow ma spread jak box-shadow?

Nie. W3C dopuszcza w text-shadow tylko 2-3 długości: przesunięcie w poziomie, w pionie i rozmycie. Czwarta wartość albo inset sprawiają, że przeglądarka odrzuca całą deklarację.

Czy cień tekstu poprawia kontrast w rozumieniu WCAG?

Wąska obwódka liter liczy się jako część litery, a szeroka, wypełniająca wnętrza liter, jako tło (uwaga 5 do kryterium 1.4.3). Dlatego przy obrysie generator ocenia oba warianty: kontrast obrysu z tłem dla wąskiego i kontrast tekstu z obrysem dla szerokiego. Rozmyty cień obwódką nie jest, więc przy cieniu liczy się kontrast samego tekstu z tłem.

Od jakiego rozmiaru tekst jest duży?

WCAG mówi o 18 punktach albo 14 punktach pogrubionych. W CSS 1 pt to 4/3 px, więc to 24 px albo 18,67 px przy pogrubieniu. Dla dużego tekstu wymagany kontrast spada z 4,5:1 do 3:1.

Jak wyłączyć odziedziczony cień tekstu?

Ustaw na elemencie potomnym text-shadow: none, w Tailwind klasą text-shadow-none. Cień dziedziczy się w dół, więc bez tego trafi też do przycisków i linków w środku sekcji.

Dlaczego obrys z 4 kierunków wygląda gorzej niż z 8?

Przy 4 kierunkach kopie leżą tylko w prawo, w lewo, w górę i w dół, więc na skosach liter obrys jest cieńszy. 8 kierunków dokłada skosy co 45°, 16 co 22,5°. Przełącz liczbę kierunków, żeby porównać je w podglądzie na swoim tekście.