W tym artykule
Co robi CSS Text Shadow
Właściwość CSS text-shadow dodaje efekty cienia do znaków tekstowych. Każdy cień jest definiowany przez przesunięcie poziome, przesunięcie pionowe, promień rozmycia i kolor. W przeciwieństwie do box-shadow, text-shadow podąża za dokładnym kształtem każdego glifu znaku, tworząc efekty owijające się wokół form liter.
Możesz nakładać wiele cieni na jeden element, oddzielając je przecinkami. Umożliwia to złożone efekty jak neonowy blask, tłoczone litery, ekstrusje 3D i ognisty tekst — wszystko w czystym CSS, bez obrazów czy canvas.
Korzystanie z generatora cienia tekstu
Generator zapewnia intuicyjne kontrolki do tworzenia cieni tekstu bez zapamiętywania składni CSS. Możesz dostosowywać każdy parametr w czasie rzeczywistym i natychmiast widzieć wynik.
- Kontrolki przesunięcia — przeciągnij suwaki lub wprowadź dokładne wartości w pikselach dla przesunięcia poziomego (X) i pionowego (Y) aby ustawić cień względem tekstu
- Promień rozmycia — zwiększ rozmycie dla miękkich, świecących efektów lub ustaw na zero dla ostrych cieni wyglądających jak solidne duplikaty
- Wiele warstw — dodaj wiele warstw cienia i zmień ich kolejność, aby tworzyć złożone efekty kompozytowe jak kontury, blask i głębię
Wypróbuj za darmo — bez rejestracji
Generuj CSS Text Shadow →Kreatywne efekty tekstowe z text shadow
Cienie tekstu to nie tylko subtelne efekty głębi. Łącząc wiele warstw cienia z różnymi przesunięciami, wartościami rozmycia i kolorami, możesz tworzyć uderzające efekty wizualne w całości w CSS.
- Neonowy blask — użyj zerowego przesunięcia z dużym promieniem rozmycia i jasnym kolorem (cyjan, magenta, limonka) powtórzonym w wielu warstwach z rosnącym rozmyciem
- Tłoczenie i letterpress — połącz jasny cień lekko przesunięty w dół-prawo z ciemnym cieniem lekko przesuniętym w górę-lewo na średnioszarym tle dla efektu wciśnięcia w metal
- Ekstrusja 3D — ułóż wiele cieni z rosnącymi przesunięciami (1px 1px, 2px 2px, 3px 3px...) w stopniowo ciemniejszych kolorach dla solidnego trójwymiarowego efektu tekstowego
Często zadawane pytania
Czy text-shadow wpływa na wydajność?
Pojedyncze cienie mają znikomy wpływ na wydajność. Jednak nakładanie wielu cieni z dużymi promieniami rozmycia może powodować spowolnienia renderowania, szczególnie na urządzeniach mobilnych. Testuj złożone efekty na docelowych urządzeniach.
Które przeglądarki obsługują text-shadow?
Text-shadow ma doskonałą obsługę we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari, Edge i przeglądarkach mobilnych. Jest obsługiwany od IE10 i może być bezpiecznie używany bez fallbacków.
Czy text-shadow można animować za pomocą przejść CSS?
Tak. Text-shadow jest w pełni animowalny za pomocą przejść CSS i animacji keyframe. Możesz płynnie przechodzić między różnymi stanami cienia dla efektów hover i animacji.