Dokumentacja CSS z przykładami: Box shadow

Q: Jaka jest składnia box-shadow?

box-shadow: offset-x offset-y blur spread color;, na przykład box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Wymagane są tylko dwa przesunięcia; dodaj inset, żeby narysować cień wewnątrz pudełka.

Jak działa box-shadow

box-shadow maluje cień wokół pudełka obramowania elementu. Uwzględnia border-radius, nie zajmuje miejsca w układzie i potrzebuje co najmniej dwóch wartości: o ile przesunąć go w poziomie i w pionie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

Składnia

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Wartość	Znaczenie	Domyślnie
`inset`	Rysuje cień wewnątrz pudełka, jak wciśnięty obszar	Na zewnątrz
offset-x	Dodatnia przesuwa w prawo, ujemna w lewo	Wymagana
offset-y	Dodatnia przesuwa w dół, ujemna w górę	Wymagana
blur	Jak miękka jest krawędź; nie może być ujemna	`0` (ostra krawędź)
spread	Powiększa (dodatnia) albo zmniejsza (ujemna) cień	`0`
color	Dowolny kolor; zwykle najlepiej wygląda półprzezroczysta czerń	Kolor tekstu

Liczba długości decyduje o ich znaczeniu: dwie to przesunięcia, trzecia dodaje rozmycie, czwarta spread. Wypróbuj:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj 0 0 0 4px #f59e0b (pierścień), inset 0 0 12px #2563eb i -8px -8px 0 #16a34a.

Spread: pierścienie i cienie z jednej strony

Spread zmienia rozmiar cienia przed rozmyciem. Wynikają z tego dwa wzorce:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Pierścień: bez przesunięcia, bez rozmycia, tylko spread. W przeciwieństwie do obramowania nie zmienia rozmiaru elementu, więc to dobry wskaźnik fokusu (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Pierścień z odstępem: połóż biały spread pod większym, kolorowym.
Tylko jedna strona: przesuń cień w dół i zmniejsz go ujemnym spreadem, żeby wystawał tylko na dole.

Warstwy cieni dla realistycznej głębi

Prawdziwe cienie mają ciemną, ostrą część blisko obiektu i miękką, bladą część dalej. Dwie albo trzy warstwy naśladują to dużo lepiej niż jedno duże rozmycie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

Pierwszy cień na liście jest malowany na wierzchu. Kolory cieni ustawiaj jako półprzezroczystą czerń albo ciemny odcień tła, nigdy jako czystą szarość, żeby przyciemniały to, co jest pod spodem.

Cienie inset

inset rysuje cień wewnątrz obszaru paddingu, jakby powierzchnia była wciśnięta. Pasuje do pól tekstowych, zagłębień i wciśniętych przycisków:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Cień inset jest rysowany nad tłem, ale pod treścią. Cienie, które podążają za kształtem liter zamiast pudełka, to text-shadow.

Częste błędy

Czysto czarne, w pełni nieprzezroczyste cienie. Wyglądają jak ciemny obrys. Użyj alfy od 10% do 30%.
Jedno ogromne rozmycie dla głębi. Połącz mały ostry cień z dużym miękkim.
Cień ucięty na krawędzi. Przycina go przodek z overflow: hidden; dodaj przodkowi padding albo przenieś regułę overflow.
Ujemne rozmycie. Jest niepoprawne i cała deklaracja zostaje zignorowana.
Animowanie box-shadow na wielu elementach. Przemalowuje każdą klatkę. Na ciężkich stronach animuj zamiast tego opacity pseudoelementu, który niesie większy cień.

Najczęściej zadawane pytania

Jaka jest składnia box-shadow?

box-shadow: offset-x offset-y blur spread color;, na przykład box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Wymagane są tylko dwa przesunięcia; dodaj inset, żeby narysować cień wewnątrz pudełka.

Co robi spread w box-shadow?

Powiększa (wartość dodatnia) albo zmniejsza (wartość ujemna) cień, zanim zostanie rozmyty. Cień bez przesunięcia, bez rozmycia i ze spreadem 3px to jednolity pierścień o grubości 3px wokół elementu.

Jak zrobić cień tylko na dole?

Przesuń go w dół i zmniejsz ujemnym spreadem, żeby zniknęły boki: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

Czy box-shadow wpływa na układ strony?

Nie. Cień nie zajmuje miejsca i nie przesuwa innych elementów, dlatego dobrze nadaje się do obrysu fokusu albo uniesienia przy najechaniu bez przesunięć układu. Może go jednak przyciąć overflow: hidden u przodka.

Czy można mieć kilka cieni box-shadow?

Tak, oddziel je przecinkami. Pierwszy cień jest rysowany na wierzchu. Połączenie małego ostrego cienia z dużym miękkim wygląda naturalniej niż jeden duży cień.

Powiązane zagadnienia