Zbuduj cień warstwa po warstwie
Ten generator cieni pisze za Ciebie właściwość CSS <code>box-shadow</code>. Dodaj tyle warstw cienia, ile potrzebujesz, ustaw dla każdej przesunięcie poziome i pionowe, rozmycie, rozszerzenie, kolor i krycie, zmień ją w cień wewnętrzny (inset) i patrz, jak podgląd zmienia się na dowolnym tle. Zacznij od presetów: miękkie cienie, poziomy w stylu Material, neumorfizm, twarde przesunięcia i poświaty, a potem skopiuj CSS lub klasę Tailwind <code>shadow-[…]</code>. Wklej istniejący cień, aby go edytować. Wszystko działa w Twojej przeglądarce.
Jak utworzyć cień CSS box-shadow
- 1Wybierz preset zbliżony do tego, czego szukasz, lub zostaw domyślny cień warstwowy.
- 2Wybierz warstwę i ustaw przesunięcie X i Y, rozmycie, rozszerzenie, kolor i krycie. Włącz Inset, aby narysować cień wewnątrz elementu.
- 3Użyj Dodaj warstwę, duplikuj, zmieniaj kolejność i ukrywaj warstwy, aby łączyć kilka cieni.
- 4Zmień tło podglądu, kolor elementu, zaokrąglenie rogów i rozmiar, aby pasowały do Twojego projektu.
- 5Skopiuj CSS lub klasę Tailwind.
Wartości box-shadow w prostych słowach
- Przesunięcie X i Y
- Jak daleko cień jest przesunięty w prawo i w dół. Wartości ujemne przesuwają go w lewo i w górę. Źródło światła nad stroną oznacza dodatnie przesunięcie Y.
- Promień rozmycia
- Jak miękka jest krawędź. 0 daje ostrą kopię elementu; większe wartości rozkładają cień na szerszy, bledszy obszar. Nie może być ujemny.
- Promień rozszerzenia
- Powiększa lub pomniejsza cień przed rozmyciem. Ujemne rozszerzenie przy dużym rozmyciu sprawia, że miękki cień nie wystaje po bokach — na tym triku opiera się większość „miękkich” cieni.
- Kolor
- Zwykle czarny lub ciemny odcień tła z niskim kryciem. Cień zabarwiony odcieniem tła wygląda naturalniej niż czysta szarość.
- inset
- Rysuje cień wewnątrz obramowania zamiast na zewnątrz, więc element wygląda na wciśnięty. Cienie wewnętrzne i zewnętrzne można łączyć w jednej deklaracji.
Po co nakładać kilka cieni?
Prawdziwy cień ma ciemny, zwarty rdzeń tam, gdzie obiekt prawie dotyka powierzchni, i miękki, szeroki półcień dalej. Jedna warstwa box-shadow potrafi narysować tylko jedno z nich. Dwie do pięciu warstw z podwajanymi przesunięciami i rozmyciami, każda z niskim kryciem, daje płynną, realistyczną głębię znaną z nowoczesnych design systemów. Dokładnie tak działa preset Płynny warstwowy.
Warstwy są malowane od przodu do tyłu: pierwsza na liście leży na wierzchu. Zmieniaj kolejność przyciskami strzałek i ukrywaj warstwę ikoną oka, aby zobaczyć, co wnosi. Ukryte warstwy są pomijane w kopiowanym CSS.
Poziomy Material, neumorfizm i inne style
Presety Poziom 1–5 odwzorowują klasyczne cienie kart z Material Design: każdy poziom łączy cień otoczenia z cieniem kierunkowym, unosząc kartę coraz wyżej nad stroną.
Neumorfizm używa dwóch cieni na elemencie w tym samym kolorze co tło: ciemnego przesuniętego w dół i w prawo oraz jasnego przesuniętego w górę i w lewo. Działa tylko wtedy, gdy kolory elementu i tła są takie same, więc preset ustawia oba. Twarde przesunięcie całkowicie usuwa rozmycie, dając płaski, brutalistyczny wygląd, a Poświata używa zerowego przesunięcia i kolorowego cienia do obwódek fokusu i efektów neonu na ciemnym tle.
Cienie w Tailwind CSS
Wbudowane w Tailwind klasy od shadow-sm do shadow-2xl obejmują typowe przypadki. W pozostałych generator pisze dowolną wartość, np. shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: spacje zamieniają się w podkreślenia, bo nazwy klas nie mogą zawierać spacji, a klasa działa w Tailwind 3 i 4 bez edycji konfiguracji.
Dobierz do cienia tło w generatorze gradientów CSS albo sprawdź czytelność tekstu na karcie w sprawdzaniu kontrastu.
Cienie a wydajność
Duże promienie rozmycia są we wszystkich obecnych przeglądarkach rysowane przez GPU i na statycznych elementach są tanie. Animowanie box-shadow przemalowuje jednak element w każdej klatce; aby animować głębię po najechaniu, umieść większy cień na pseudoelemencie i animuj jego opacity.
Najczęstsze pytania
- Jaka jest składnia box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. Wymagane są tylko dwa przesunięcia. Kilka cieni oddziel przecinkami, np. box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Jak zrobić miękki, subtelny cień?
- Użyj czarnego o niskim kryciu (10–20%), dużego rozmycia, małego przesunięcia Y i ujemnego rozszerzenia, np. 0 10px 30px -5px rgba(0,0,0,0.15). Dwa lub trzy takie cienie nałożone na siebie wyglądają jeszcze płynniej.
- Jak dodać cień tylko z jednej strony?
- Przesuń cień w tę stronę i ustaw ujemne rozszerzenie mniej więcej równe rozmyciu, aby nie był widoczny z innych stron, np. 0 8px 6px -6px rgba(0,0,0,0.3) dla cienia tylko na dole.
- Co robi inset?
- inset rysuje cień wewnątrz elementu zamiast za nim, przez co element wygląda na wciśnięty w stronę. Często stosuje się go w polach formularzy i wciśniętych przyciskach.
- Czym różni się box-shadow od drop-shadow?
- box-shadow podąża za ramką elementu i zaokrągleniem rogów. Funkcja filter: drop-shadow() podąża za faktycznie widocznymi pikselami, np. konturem przezroczystego PNG lub ikony SVG, ale nie ma rozszerzenia ani inset.
- Jak użyć własnego cienia w Tailwind?
- Skopiuj klasę Tailwind z generatora — dowolną wartość w stylu shadow-[0_4px_12px_rgba(0,0,0,0.15)] — i dodaj ją do elementu. Możesz też wpisać wartość CSS w ustawieniach boxShadow motywu i nadać jej nazwę.
- Czy mogę edytować cień, który już mam?
- Tak. Wklej wartość box-shadow, pełną deklarację lub klasę Tailwind shadow-[…] w polu Import. Długości w rem i em są przeliczane przy 16px.
- Czy mój CSS jest gdzieś wysyłany?
- Nie. Generator działa w całości w Twojej przeglądarce.