Generator cienia tekstu (text-shadow)

Wpisz swój tekst, dostosuj cień suwakami i skopiuj kod text-shadow. Łącząc kilka warstw, uzyskasz efekt neonu, litery 3D, obrysy lub wytłoczony tekst.

Cień tekstu

Witaj świecie

Przykłady:

Warstwy cienia

px
px
px

Jak działa text-shadow

text-shadow przyjmuje przesunięcie poziome i pionowe, rozmycie i kolor cienia, na przykład 2px 2px 4px rgba(0, 0, 0, 0.4). W przeciwieństwie do box-shadow nie ma rozciągnięcia ani inset, a cień podąża za kształtem każdej litery.

Podobnie jak w box-shadow, można łączyć kilka cieni oddzielonych przecinkami; pierwszy znajduje się na wierzchu. Tak powstają efekty z przykładów: neon nakłada cienie bez przesunięcia i coraz bardziej rozmyte, 3D sumuje ostre cienie przesunięte piksel po pikselu, a obrys umieszcza cztery ostre cienie wokół litery.

Czytelność

Delikatny cień pomaga czytać tekst na zdjęciu, ale mocne cienie w długich akapitach męczą wzrok. Stosuj je w nagłówkach i przyciskach i zawsze sprawdzaj kontrast tekstu z tłem.