Generator cienia tekstu CSS: neon, 3D, długi cień + Tailwind | We.Inc
Twórz warstwowe cienie tekstu CSS z podglądem na żywo. Zacznij od presetów neon, 3D, długi cień, letterpress lub obrys, a potem skopiuj CSS albo klasę Tailwind.
Generator cienia tekstu CSS
Właściwość CSS text-shadow przyjmuje przesunięcie x, przesunięcie y, opcjonalny promień rozmycia i kolor, na przykład text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Oddziel kilka cieni przecinkami, aby je nałożyć na siebie: tak powstają neonowe poświaty i litery 3D. Zbuduj cień poniżej i skopiuj CSS lub klasę Tailwind.
Cztery wartości jednego cienia
Wartość
Przykład
Efekt
przesunięcie x
Przesuwa cień w prawo (ujemne: w lewo)
przesunięcie y
Przesuwa cień w dół (ujemne: w górę)
promień rozmycia
Zmiękcza krawędź; 0 daje ostrą kopię
rgb(0 0 0 / 0.25)
Dowolny kolor CSS; domyślnie kolor tekstu
Nakładaj tyle warstw, ile chcesz, zmieniaj tekst, rozmiar czcionki i kolory, a podgląd od razu się aktualizuje. Wynikiem jest zwykły CSS działający w każdej aktualnej przeglądarce oraz klasa Tailwind dla projektów, które go używają.
Wybierz preset lub zacznij od pojedynczego miękkiego cienia.
Edytuj przesunięcia, rozmycie, kolor i krycie każdej warstwy albo dodawaj i usuwaj warstwy. Warstwy z początku listy są rysowane na wierzchu.
Zmień tekst podglądu, rozmiar, grubość i kolory, aby pasowały do Twojego projektu.
Skopiuj deklarację CSS lub klasę Tailwind z dowolną właściwością (arbitrary property).
Cienie nie liczą się przy sprawdzaniu kontrastu. Upewnij się, że tekst ma wystarczający kontrast z tłem bez cienia, a cień dodaj jako wykończenie.
Dla białego tekstu na zdjęciu z dużą ilością szczegółów miękki ciemny cień poprawia czytelność bardziej niż ostry. Połącz go z ciemną nakładką na obrazie, aby tekst był naprawdę czytelny.
Duże promienie rozmycia na wielu warstwach kosztują czas renderowania, a ich animowanie kosztuje jeszcze więcej. Mocne poświaty zostaw dla nagłówków, nie dla tekstu głównego.
Jasny cień 1px pod szarym tekstem na szarym tle daje wytłoczony efekt letterpress; odwróć przesunięcie, aby uzyskać tekst wypukły.
Najczęściej zadawane pytania
Jak zrobić neonowy tekst w CSS?
Użyj jasnego tekstu z kilkoma cieniami w tym samym jaskrawym kolorze, z zerowym przesunięciem i rosnącym rozmyciem: ciasna biała poświata, a potem poświaty 12px, 24px i 48px w kolorze akcentu. Umieść go na ciemnym tle. Preset Neon jest dobrym punktem wyjścia.
Czy text-shadow obsługuje spread jak box-shadow?
Nie. text-shadow nie ma wartości spread ani słowa kluczowego inset. Aby uzyskać grubszy obrys, nałóż kilka ostrych cieni przesuniętych o jeden piksel w każdym kierunku, tak jak robi to preset Obrys, albo użyj -webkit-text-stroke.
Jak dodać cień tekstu w Tailwind?
Tailwind 4.1 i nowsze wersje zawierają narzędzia text-shadow, takie jak text-shadow-sm i text-shadow-lg. Dla własnego cienia w dowolnej wersji użyj dowolnej właściwości, na przykład [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], gdzie podkreślenia zastępują spacje. Generator napisze tę klasę za Ciebie.
Dlaczego mój cień wygląda inaczej w Safari?
Przeglądarki rasteryzują rozmycie nieco inaczej, więc duże rozmycia mogą wyglądać łagodniej lub mocniej w zależności od silnika. Ostre cienie z zerowym rozmyciem wyglądają wszędzie tak samo.
Jak działa nakładanie cieni
Każdy cień oddzielony przecinkiem jest malowany za tekstem, a pierwszy z listy ląduje na wierzchu pozostałych. Ta kolejność ma znaczenie przy efektach 3D: najbliższą, najjaśniejszą warstwę podaj jako pierwszą, a najdalszą, najciemniejszą jako ostatnią.
Długie cienie to po prostu wiele identycznych warstw przesuwanych o jeden piksel. Robią wrażenie w dużym nagłówku, ale każda warstwa to kolejne malowanie, więc nie przesadzaj z liczbą kroków.
Dostępność i ruch
Cienie mogą rozmywać mały tekst i utrudniać czytanie osobom słabowidzącym. Efekty dekoracyjne zostaw dla dużych nagłówków, a tekst główny utrzymuj ostry.
Jeśli animujesz poświatę, opakuj animację w sprawdzenie prefers-reduced-motion, aby osoby, które poprosiły o mniej ruchu, dostały wersję statyczną.