Generator text-shadow CSS
Darmowy online generator text-shadow CSS. Nakładaj wiele warstw cienia z przesunięciem, rozmyciem, kolorem i nieprzezroczystością, wypróbuj presety Neon, 3D, Retro i natychmiast kopiuj CSS.
Czym jest właściwość text-shadow w CSS?
text-shadow dodaje efekty cienia do glifów tekstu. Każdy cień definiuje przesunięcie poziome, pionowe, opcjonalny promień rozmycia i kolor, a kilka cieni można połączyć w jednej wartości rozdzielonej przecinkami, tworząc bogate efekty.
Jak działają liczne warstwy cienia?
Warstwy rysowane są od dołu do góry w kolejności deklaracji, więc pierwszy cień na liście jest na wierzchu. Ten generator pozwala dodawać, usuwać, włączać i wyłączać warstwy, każda z własnym przesunięciem, rozmyciem, kolorem i nieprzezroczystością, aby układać efekty jak Neon czy 3D.
Co oznaczają przesunięcie X, przesunięcie Y i rozmycie?
Przesunięcie X przesuwa cień w lewo lub prawo od glifów, przesunięcie Y w górę lub dół, a promień rozmycia zmiękcza krawędzie: 0 daje twardą krawędź jak w stylach Retro czy Kontur, większe wartości rozmywają kolor jak poświata.
Jak zrobić efekt neonowej poświaty?
Użyj presetu Neon lub ustaw kilka warstw z zerowym przesunięciem, tym samym jaskrawym kolorem i rosnącymi wartościami rozmycia, np. 0 0 3px, 0 0 8px i 0 0 20px. Ułożone aury imitują blask neonówki.
Czy text-shadow wpływa na wydajność renderowania?
Kilka statycznych warstw jest tanich, ale tekst z wieloma mocno rozmytymi cieniami kosztuje więcej przy przemalowywaniu. Ciężkie cienie na długich akapitach lub ciągła animacja text-shadow może powodować spadki klatek na słabych i mobilnych urządzeniach: wybieraj krótkie nagłówki, umiarkowane rozmycie albo animuj przezroczystość.
Jak zrobić półprzezroczysty cień?
Każda warstwa ma suwak nieprzezroczystości, który zamienia wybrany kolor na zapis rgba, np. rgba(0, 0, 0, 0.5). Półprzezroczyste cienie naturalnie łączą się z dowolnym tłem — tak działa miękki efekt wytłoczenia w presecie Papier.
Jaka jest różnica między text-shadow a box-shadow?
text-shadow dotyczy kształtu glifów tekstu i nie ma wartości rozprzestrzenienia ani wewnętrznego cienia, a box-shadow otacza prostokątny blok dowolnego elementu. Składnia przesunięcia i rozmycia jest wspólna, ale jedno nie zastępuje drugiego.
Które przeglądarki obsługują text-shadow?
text-shadow obsługują wszystkie nowoczesne przeglądarki, w tym Chrome, Firefox, Safari, Edge i Opera, i od ponad dekady działa stabilnie bez prefiksów. Wielowarstwowe cienie zachowują się tak samo wszędzie.
Czy to, co wpisuję, jest wysyłane na serwer?
Nie. Tekst podglądu i wszystkie skonfigurowane warstwy pozostają w Twojej przeglądarce, a CSS powstaje lokalnie na stronie. Nic nie jest wysyłane przez sieć, więc po załadowaniu narzędzie działa też offline.
Jak korzystać z Generator text-shadow CSS
Projektuj cienie tekstowe CSS, układając warstwy zamiast zgadywać jedno przesunięcie. Każda zmiana renderuje się na dużym podglądzie na żywo, a CSS generuje się lokalnie w Twojej przeglądarce.
- Wpisz własne słowa w polu Tekst podglądu, by przetestować efekt na prawdziwym tekście.
- Wypróbuj preset: Neon, Papier, 3D, Retro, Poświata lub Kontur wczytuje gotowe warstwy.
- Dostroj każdy warstwę jej suwakami: Przesunięcie X, Przesunięcie Y, Rozmycie, Kolor i Nieprzezroczystość.
- Użyj Dodaj warstwę, by nakładać więcej cieni, odznacz warstwę, by ją wyłączyć, albo usuń ją ikoną kosza.
- Skopiuj wygenerowaną regułę text-shadow i wklej ją do swojego arkusza stylów.
Poświaty neonowe wyglądają najlepiej z trzema lub czterema warstwami tego samego koloru i rosnącym rozmyciem — trzymaj przesunięcia na zerze i pozwól, by rozmycie zrobiło robotę.
Powiązane narzędzia
- Generator Box Shadow CSS Darmowy generator box-shadow CSS online. Wizualnie twórz piękne cienie z regulowanym przesunięciem, rozmyciem, rozprzestrzenieniem, kolorem i inset. Podgląd na żywo i natychmiastowe kopiowanie kodu.
- Generator gradientów CSS Twórz oszałamiające gradienty CSS wizualnie. Generuj gradienty liniowe, radialne i stożkowe z wieloma punktami kolorów, kątami i pozycjami. Natychmiast kopiuj gotowy do produkcji kod CSS.
- Generator Ozdobnych Czcionek Darmowy generator ozdobnych czcionek z 28 stylami Unicode. Twórz tekst pogrubiony, kursywę, gotyk i tekst w kółkach do bio na Instagramie, TikToku, WhatsApp i nicków w grach.
- Generator border-radius Darmowy kreatywny generator border-radius online. Przeciągnij 8 uchwytów lub wybierz kształt blob, aby tworzyć organiczne formy CSS i kopiować kod od razu.
- Konwerter kolorów Darmowy konwerter kolorów online. Natychmiastowa konwersja formatów HEX, RGB, HSL, HSV z wizualnym wyborem koloru. 100% prywatne, działa w przeglądarce.
- Generator easing CSS Darmowy online generator easing CSS. Przeciągaj punkty kontrolne cubic-bezier na interaktywnej krzywej, wybierz jeden z 18 presetów, oglądaj zapętloną animację kulki i natychmiast kopiuj funkcję czasu.
- Generator CSS clip-path Darmowy online generator CSS clip-path. Projektuj kształty polygon, circle, ellipse i inset z przeciąganymi punktami, podglądem na żywo i kopiowaniem kodu CSS jednym kliknięciem.
- Upiększacz CSS Formatuj i upiększaj kod CSS natychmiast. Konwertuj zminifikowany CSS na czytelny kod z konfigurowalnymi opcjami.