Generator cieni tekstu
Generator CSS text-shadow ustawia przesunięcie, rozmycie, kolor i krycie cienia tekstu z podglądem na żywo i pozwala nakładać wiele warstw cienia, by uzyskać poświatę, obrys i efekty tekstu 3D.
O tym narzędziu
Generator CSS text-shadow ustawia przesunięcie, rozmycie, kolor i krycie cienia tekstu z podglądem na żywo i pozwala nakładać wiele warstw cienia, by uzyskać poświatę, obrys i efekty tekstu 3D.
Jak używać
- Dostosuj przesunięcie w poziomie i pionie oraz rozmycie.
- Wybierz kolor i krycie cienia, a także kolor i rozmiar tekstu.
- Kliknij Add Layer, aby dodać kolejny cień; Reset Layers zaczyna od nowa.
- Kliknij Copy CSS.
Warto wiedzieć
- Składnia text-shadow to: offset-x offset-y blur-radius color.
- W przeciwieństwie do box-shadow, text-shadow nie ma wartości spread ani słowa kluczowego inset.
- Wiele cieni oddziela się przecinkami; pierwszy jest rysowany na wierzchu.
- Cień z zerowym przesunięciem i rozmyciem daje efekt poświaty.
- Nałożenie kilku przesunięć po 1 px tworzy efekt 3D lub tłoczenia.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak dodać cień do tekstu w CSS?
Użyj text-shadow, np. text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Jak zrobić świecący tekst?
Użyj zerowych przesunięć z rozmyciem i jasnym kolorem, np. text-shadow: 0 0 8px #1db954; nałóż kilka warstw, by poświata była mocniejsza.
Czy mogę użyć więcej niż jednego cienia tekstu?
Tak. Oddziel cienie przecinkami; to narzędzie doda każdą warstwę za Ciebie.
Czy text-shadow wpływa na czytelność?
Delikatne cienie mogą poprawić czytelność na zdjęciach, ale mocne cienie ją pogarszają — sprawdź kontrast w narzędziu do kontrastu.