Płaskie bloki, przyciski bez głębi, karty zlewające się z tłem, typowy obraz strony, na której projektant poskąpił box-shadow. Tymczasem kilka linijek CSS potrafi zmienić nudny układ w interfejs z charakterem: dodać powietrza, wyróżnić kluczowy blok lub miękko oddzielić sekcję bez użycia border.

Problem w tym, że większość deweloperów zatrzymuje się na domyślnym szarym cieniu 0px 2px 5px rgba(0,0,0,0.2) i zapomina, że box-shadow potrafi znacznie więcej: wielowarstwowe cienie, kolorowe poświaty, neomorfizm, efekty inset, a nawet renderowanie pixel-artu bez ani jednego div.

Poniżej 13 technik, które zmienią box-shadow z nudnego narzędzia w Pana główny instrument do pracy z głębią. Każdy snippet został skopiowany z rzeczywistych projektów i jest gotowy do użycia.

💡 Szybki przegląd:

• Rozkładamy składnię box-shadow tak, by zapamiętać ją za pierwszym razem
• 13 gotowych snippetów: od ledwo widocznej ramki po wielowarstwową, wielokolorową poświatę
• Trzy sposoby podłączenia CSS do HTML i kiedy stosować każdy z nich
• Częste pytania: wydajność, filter drop-shadow, inspektor Chrome i neomorfizm

Czym jest box-shadow i jak działa

Właściwość box-shadow dodaje jeden lub kilka cieni do elementu. W przeciwieństwie do border, cień nie wpływa na przepływ dokumentu i nie zwiększa rozmiarów bloku, jest rysowany „na zewnątrz", poza obrębem elementu.

Pełna składnia:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Omówienie każdego parametru:

• offset-x, przesunięcie w poziomie. Wartość dodatnia przesuwa cień w prawo, ujemna, w lewo.
• offset-y, przesunięcie w pionie. Wartość dodatnia, w dół, ujemna, w górę. To dwa jedyne obowiązkowe parametry.
• blur-radius, promień rozmycia. Im większa wartość, tym bardziej miękki i szerszy cień. Domyślnie 0, cień z ostrymi krawędziami.
• spread-radius, promień rozprzestrzeniania. Wartość dodatnia rozszerza cień na zewnątrz, ujemna, zwęża go do wewnątrz. Przydatne do imitowania ramek bez border.
• color, kolor w dowolnym formacie: hex, rgb(), rgba(), hsl(). Przezroczystość uzyskana przez rgba() lub hsla() daje najbardziej naturalne cienie.

Sztuczka polega na tym, że można przekazać kilka wartości oddzielonych przecinkiem. To właśnie otwiera drogę do technik opisanych poniżej: każdy kolejny cień na liście nakłada się na poprzedni.

1. Ledwo zauważalny cień z trzech stron

Minimalistyczny cień, który dodaje głębi, ale nie krzyczy o sobie. Idealny do kart produktów, zapowiedzi artykułów i wszelkich bloków na jasnym tle.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Przesunięcie tylko w dół o 8px i duże rozmycie 24px tworzą efekt unoszącego się bloku. Przezroczystość 0.2 sprawia, że cień jest ledwo widoczny na bieli, dokładnie tyle, by oko czuło się komfortowo.

2. Lekki cień ze wszystkich stron

Gdy blok potrzebuje cienia równomiernie na całym obwodzie, na przykład dla okna modalnego lub dymka podpowiedzi.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Zerowe przesunięcie w poziomie i spread-radius 0px rozkładają cień symetrycznie. Duży blur-radius (29px) sprawia, że przejście jest płynne. Kolor rgba(100, 100, 111, ...) daje chłodny, szary odcień, który wygląda lepiej na bieli niż czysta czerń.

3. Cienki cień z prawej i od dołu

Klasyczny efekt „uniesienia". Sprawdza się w przypadku przycisków, kart ze stanem hover i każdego elementu, który ma wyglądać dotykalnie.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Małe wartości przesunięcia (około 2px) i niewielkie rozmycie tworzą ostry, niemal wektorowy cień. Dobrze łączy się z transform: translateY(-2px) na hover, cień „jedzie" razem z blokiem, wzmacniając efekt podnoszenia.

4. Nasycony cień ze wszystkich stron

Do przypadków, gdy element musi wyraźnie odcinać się od tła: sekcje hero, karty z ważną treścią, banery.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Wysoka nieprzezroczystość (0.35) i niewielkie rozmycie (15px) dają wyrazisty, czytelny cień. Przy zerowym przesunięciu poziomym układa się on równo, a blok wygląda, jakby unosił się nad stroną.

5. Rozproszony, wielowarstwowy cień

Pięć warstw cieni, które współpracują ze sobą: jedna głęboka dla oderwania od tła, pozostałe dla miękkiego rozproszenia na boki.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

Pierwsza warstwa, główny cień w dół (54px, nieprzezroczystość 0.25). Druga, lekki cień w górę (ujemne przesunięcie -12px). Pozostałe dopracowują krawędzie. Razem dają złożony, realistyczny rysunek światłocienia, jak w przypadku fizycznego obiektu w rozproszonym oświetleniu.

6. Cienka ramka z wewnętrznym cieniem

Dwa cienie tworzą iluzję cienkiej ramki (border) i jednocześnie dodają głębi. Żadnego border w kodzie.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Analiza trzech warstw:

• Pierwsza, „ramka": zerowe przesunięcie i rozmycie, spread-radius 2px imituje border: 2px solid.
• Druga, główny cień w dół dla objętości.
• Trzecia, biały cień inset od góry, daje odblask (efekt szkła).

7. Cień z lewej i od dołu

Niestandardowy kierunek, cień pada w lewo i nieco w dół. Dobrze wygląda na elementach wyrównanych do prawej krawędzi lub do tworzenia asymetrycznej kompozycji.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Ujemne przesunięcie poziome (-4px) kieruje cień w lewo. Ujemny spread-radius (-6px) ściska cień do wewnątrz, czyniąc go bardziej zwartym niż sam blok, nie „wychodzi" on poza krawędzie.

8. Dwustronny cień: światło z góry z lewej, cień z dołu z prawej

Imitacja kierunkowego źródła światła, tak jakby lampa świeciła z lewego górnego rogu.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Pierwsza warstwa, niebieskawy cień (rgba(136, 165, 191, ...)) z prawej strony od dołu. Druga, białe „podświetlenie" z lewej od góry (ujemne przesunięcia, wysoka nieprzezroczystość). Razem tworzą realistyczny efekt trójwymiarowy, blok wygląda, jakby był oświetlony softboksem.

9. Kolorowa ramka-poświata

Jeden cień z zerowym przesunięciem i rozmyciem, ale z dodatnim spread-radius, daje schludną kolorową poświatę wokół elementu.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Niebieska poświata (rgba(3, 102, 214, ...)) o promieniu 3px. Idealna dla inputów w stanie focus (:focus), aktywnych przycisków i wyróżnienia bieżącej pozycji menu. Jeśli zmieni Pan/Pani kolor na rgba(220, 38, 38, 0.3), otrzyma Pan/Pani walidacyjne podświetlenie błędu.

10. Podwójny cień wewnętrzny dla efektu „wklęśnięcia"

Dwie warstwy inset tworzą głęboki, wklęsły efekt. Pasuje do tłowych tekstur, wciśniętych przycisków i paneli dekoracyjnych.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Słowo kluczowe inset przenosi cień do wnętrza elementu. Pierwsza warstwa, szeroki cień od góry. Druga, ciemniejsza i bardziej zwarta, również od góry. Ujemny spread-radius (-12px, -18px) sprawia, że cienie nie wypełniają całego bloku, krawędzie pozostają jasne, a środek jest wklęsły.

11. Kolorowa „kaskada" cieni w dół

Pięć warstw jednego koloru z rosnącym przesunięciem tworzy efekt wielowarstwowego kolorowego cienia, jak w Material Design, ale wyraźniejszy.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Każda kolejna warstwa jest przesunięta o 5px dalej i ma mniejszą nieprzezroczystość. Rozmycie nie jest ustawione, cienie są ostre, jak wektorowe pasy. Daje to jaskrawy, neonowy ślad za blokiem. Jeśli zastąpi Pan/Pani różowy kolorem markowym, otrzyma Pan/Pani rozpoznawalny akcent.

12. Kolorowa „kaskada" w prawo i w dół

Ta sama technika, ale z poziomym przesunięciem, cień biegnie po przekątnej.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

Kaskada diagonalna stwarza wrażenie ruchu w prawo i w dół. Dobrze wygląda na przyciskach po najechaniu, blok zdaje się „zjeżdżać" za swoim cieniem.

13. Rozproszony cień z gradientem gęstości

Pięć warstw, w których każde kolejne przesunięcie jest podwajane (2px, 4px, 8px, 16px, 32px), a nieprzezroczystość jest stała. Rezultat, cień z płynnym gradientem gęstości, jest najbardziej realistyczny w zestawieniu.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Niewielkie rozmycie każdej warstwy (1px, 2px, 4px, 8px, 16px) rośnie proporcjonalnie do przesunięcia. Daje to fizycznie dokładne rozproszenie, cień „znika" wraz z odległością, jak w realnym świecie. Idealny do kart, które mają wyglądać maksymalnie naturalnie.

Trzy sposoby podłączenia CSS do HTML

Gdy fragment kodu jest już wybrany, trzeba go dodać do strony. CSS daje trzy opcje, a każda ma swoją niszę.

Reguły umieszcza się w znaczniku <style> wewnątrz <head> dokumentu HTML. Pasuje to do stron jednostronicowych i szybkich prototypów, wszystko znajduje się w jednym pliku.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

Minusem jest to, że style nie są osobno cache'owane przez przeglądarkę i nie można ich ponownie wykorzystać na innych stronach.

Wbudowany CSS (Inline)

Style zapisuje się bezpośrednio w atrybucie style elementu HTML. Najszybszy sposób „na gorąco", ale i najbardziej uciążliwy w utrzymaniu.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Proszę stosować style inline punktowo: dla wartości dynamicznych z JavaScript, do tworzenia szablonów e-mail (gdzie zewnętrzne arkusze stylów są często wycinane przez klienty pocztowe) oraz dla krytycznego CSS „above the fold".

Zewnętrzny CSS (External)

Reguły umieszcza się w osobnym pliku .css i podłącza przez <link>. To standard dla każdego projektu bardziej złożonego niż jednostronicowa wizytówka.

Plik styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

Dokument HTML:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

Zewnętrzny CSS jest cache'owany przez przeglądarkę, łatwy w utrzymaniu i skalowalny. We wszystkich trzech przypadkach rezultat renderowania jest identyczny, proszę wybrać sposób pod architekturę projektu.

Krótkie, ale treściwe wideo (8 minut): autor pokazuje, jak zastąpić płaskie, szare cienie gradientowymi poświatami, warstwa po warstwie, z objaśnieniem każdego parametru.

⁉️🤔 Często zadawane pytania

Jaka jest różnica między box-shadow a filter: drop-shadow()?

box-shadow podąża za kształtem bounding boxu elementu, zawsze jest to prostokąt. filter: drop-shadow() podąża za kanałem alfa i odwzorowuje faktyczny kształt: w przypadku PNG z przezroczystością cień padnie po konturze obiektu, a nie po prostokątnej ramce. Dlatego drop-shadow() jest niezastąpiony dla obrazków z wyciętym tłem, ikon i SVG. Działa jednak wolniej, ponieważ przeglądarka analizuje piksele, a nie geometrię bloku.

Ile warstw box-shadow można zdefiniować bez utraty wydajności?

Formalnego limitu nie ma, ale praktyczny pułap na przeciętnym urządzeniu to 10-15 warstw. Powyżej tej liczby zaczną Państwo zauważać spadki FPS przy przewijaniu i animacjach, szczególnie na urządzeniach mobilnych. Przyczyną jest to, że każda warstwa wymaga osobnego przebiegu renderowania. Dla animowanych elementów proszę ograniczyć się do 2-3 warstw i użyć will-change: box-shadow, co zasugeruje przeglądarce przeniesienie elementu na osobną warstwę kompozytową.

Jak podejrzeć i debugować box-shadow w Chrome DevTools?

Proszę otworzyć DevTools (F12), wybrać element na karcie Elements, po prawej stronie znaleźć właściwość box-shadow w panelu Styles. Proszę kliknąć ikonę kolorowego kwadratu obok wartości, otworzy się wizualny edytor cieni z suwakami offset-x, offset-y, blur i spread. Można zmieniać wartości myszą i od razu widzieć rezultat. W przypadku cieni wielowarstwowych każdą warstwę edytuje się osobno, są one wymienione w tym samym polu, oddzielone przecinkami.

Czym jest neomorfizm i jak go uzyskać za pomocą box-shadow?

Neomorfizm to styl wizualny, w którym elementy wyglądają, jakby były „wyrzeźbione" z tego samego materiału co tło. Uzyskuje się go dwoma cieniami: jasnym z góry i z lewej oraz ciemnym z dołu i z prawej (jak w technice nr 8). Kluczowym warunkiem jest to, aby tło strony i kolor elementu były identyczne lub bardzo zbliżone. Przykład dla jasnego motywu:

1
.neuromorphic {
2
  background: #e0e0e0;
3
  box-shadow:
4
    8px 8px 16px #bebebe,
5
    -8px -8px 16px #ffffff;
6
}

Styl jest efektowny, ale dyskusyjny z punktu widzenia dostępności (accessibility): słaby kontrast sprawia, że elementy są słabo rozróżnialne dla osób z wadami wzroku. Proszę stosować go z umiarem i koniecznie sprawdzać kontrast.

Czy można użyć box-shadow do rysowania kształtów bez div?

Tak, i jest to osobny gatunek CSS-artu. Ponieważ box-shadow obsługuje nieskończoną liczbę warstw, każdą z własnymi współrzędnymi i kolorem, można „namalować" pixel-art za pomocą jednego box-shadow na jednym div. Technika działa tak: każda warstwa z przesunięciem 1px × N i zerowym blur to jeden „piksel". Setki warstw składają się na obraz. Generatory takie jak CSS Box Shadow Generator automatyzują ten proces, ale w zastosowaniach produkcyjnych to raczej ciekawostka, SVG poradzi sobie efektywniej.

Jaki cień wybrać dla Państwa projektu?

Trzynaście powyższych technik pokrywa całe spektrum: od niezauważalnego cienia dla skromnych kart po odważną, neonową kaskadę. Kluczową umiejętnością nie jest tu zapamiętanie wszystkich snippetów, ale zrozumienie logiki parametrów, dzięki czemu dobiorą Państwo odpowiedni cień do zadania szybciej, niż znajdą gotowiec.

Krótka ściąga:

• Potrzebują Państwo głębi bez wizualnego szumu, proszę sięgnąć po techniki 1-3 (ledwie zauważalne pojedyncze cienie).
• Chcą Państwo realistycznego „unoszenia się" nad stroną, 5 (wielowarstwowy rozproszony) lub 13 (gradient gęstości).
• Wyróżnić interaktywny element kolorem, 9 (kolorowa ramka) lub 11-12 (kolorowa kaskada).
• Zasymulować wklęsłość/szkło, 6 i 10 (cienie inset).
• Potrzebują Państwo neomorfizmu, 8 (dwustronny cień) plus tło w tym samym tonie.

Proszę dodać tę stronę do zakładek jako ściągawkę. A jeśli stworzą Państwo swój autorski przepis na cień, proszę go testować na rzeczywistych urządzeniach: ten sam cień na ekranie Retina i na budżetowym monitorze biurowym może wyglądać zupełnie inaczej.