Softonic

Generator cienia tekstu w CSS

Krok 1 / 2
Generuj CSS

Dobieranie deklaracji text-shadow na oko w DevTools działa, ale zamienia się w zgadywanie w chwili, gdy potrzebujesz miękkiej neumorficznej poświaty, dwuwarstwowego cienia w stylu retro albo wyraźnego konturu o grubości 1 piksela na dużym nagłówku. Ten generator pozwala ustawić przesunięcie X i Y, promień rozmycia oraz kolor RGBA i skopiować gotowy do wklejenia wiersz CSS.

Jak stworzyć cień tekstu

  1. 1

    Ustaw przesunięcia

    X to przesunięcie poziome w pikselach, Y – pionowe. Dodatnie Y przesuwa cień w dół, ujemne – w górę.

  2. 2

    Wybierz promień rozmycia

    Rozmycie 0 daje ostry kontur; wyższe wartości stopniowo rozmywają cień. Typowe miękkie cienie używają od 4 do 12 pikseli rozmycia.

  3. 3

    Wybierz kolor

    Użyj ciągu RGBA, aby regulować przezroczystość. `rgba(0,0,0,0.35)` to bezpieczna wartość domyślna dla subtelnej głębi na jasnych tłach.

  4. 4

    Skopiuj deklarację

    Narzędzie generuje `text-shadow: Xpx Ypx Blurpx color;` – wstaw ją do odpowiedniego selektora w swoim arkuszu stylów.

Przepisy na cień tekstu, które naprawdę dobrze wyglądają

Cień tekstu to suma czterech liczb i koloru. Zapamiętaj to, a odtworzysz niemal każdy efekt z magazynu czy landing page.

Ściąga

Efekt Deklaracja
Subtelna głębia text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Miękki cień text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Kontur 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Podwójny retro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neonowa poświata text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Nakładanie wielu cieni

text-shadow przyjmuje listę rozdzieloną przecinkami. Przeglądarka rysuje według algorytmu malarza, w kolejności z kodu – ostatni cień na liście trafia za wszystkie pozostałe. Wykorzystaj to do imitowania konturów (cztery ostre cienie o grubości 1 px w czterech kierunkach) albo do budowania głębi przez nałożenie ostrego cienia bliskiego i rozmytego cienia dalekiego.

Kiedy zrezygnować z cienia tekstu

  • Przy bardzo małym tekście podstawowym rozmycie powyżej 2 px sprawi, że glify będą wyglądać na rozmazane. Lepiej użyj -webkit-font-smoothing i mocniejszego kontrastu.
  • W animacjach sekcji hero wrażliwych na wydajność unikaj więcej niż trzech nałożonych cieni; każda warstwa zmusza przeglądarkę do ponownego rasteryzowania tekstu.
  • Jeśli potrzebujesz cienia z ciasnym przesunięciem na złożonej ścieżce (krzywe, obroty), rozważ <filter> SVG z feDropShadow – dokładniej podąży za konturem glifu.

Najczęściej zadawane pytania

Z założenia wynikiem jest jedna warstwa cienia. Aby nałożyć efekty, uruchom generator kilka razy i połącz wyniki przecinkami – na przykład text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow podąża za konturami glifów renderowanego tekstu, a box-shadow – za prostokątną ramką elementu. Przyjmują podobne parametry, ale rasteryzują się na zupełnie różnych kształtach.

Przeglądarki rasteryzują cienie tekstu według siatki pikseli urządzenia. Cień z rozmyciem 0 na ekranie 2x renderuje się w pozycjach subpikselowych i może wyglądać na nieco miękki. Zwiększenie rozmycia do 1 zwykle to naprawia, nie zmieniając wizualnej wagi.

Wprowadzone wartości są wysyłane na nasz serwer w celu zbudowania deklaracji, ale nie są przechowywane ani ponownie wykorzystywane. W widoku wieloetapowym wędrują w linku między krokami; w widoku jednostronicowym nic nie jest zachowywane, odśwież stronę, a wszystko zniknie.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Ściągawka do Markdown

Praktyczna ściągawka Markdown z prawdziwym podglądem i przykładami gotowymi do skopiowania: nagłówki, listy, tabele, kod, linki, obrazy i składnia GFM.

Symulator licznika rozkazów

Śledź uproszczony listing instrukcji o stałej długości z etykietami, skokami, wywołaniami, powrotami i adresami 16-, 24- lub 32-bitowymi.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Narzędzie jest dostępne w innych językach