Исполняемые доки CSS: Тень box-shadow

Q: Какой синтаксис у box-shadow?

box-shadow: offset-x offset-y blur spread color;, например box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Обязательны только два смещения; добавьте inset, чтобы тень рисовалась внутри блока.

Тень box-shadow в CSS: синтаксис, spread, inset и примеры

box-shadow рисует тени вокруг блока элемента. Разберем пять значений (x, y, размытие, spread, цвет), внутренние тени inset, наложение нескольких теней для реалистичной глубины, кольца фокуса через spread и ошибки, от которых тени выглядят грязно.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как работает box-shadow

box-shadow рисует тень вокруг блока элемента по внешнему краю рамки. Она следует border-radius, не занимает места в раскладке и требует минимум двух значений: насколько сместить ее по горизонтали и по вертикали.

<!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>

Синтаксис

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

Значение	Смысл	По умолчанию
`inset`	Рисовать тень внутри блока, как вдавленную область	Снаружи
offset-x	Положительное сдвигает вправо, отрицательное влево	Обязательно
offset-y	Положительное сдвигает вниз, отрицательное вверх	Обязательно
blur	Насколько мягкий край; не может быть отрицательным	`0` (четкий край)
spread	Увеличивает (положительное) или уменьшает (отрицательное) тень	`0`
color	Любой цвет; обычно лучше всего смотрится полупрозрачный черный	Цвет текста

Количество длин определяет их смысл: две это смещения, три добавляют размытие, четыре добавляют spread. Попробуйте:

<!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>

Попробуйте 0 0 0 4px #f59e0b (кольцо), inset 0 0 12px #2563eb и -8px -8px 0 #16a34a.

Spread: кольца и тени с одной стороны

Spread меняет размер тени до размытия. Из этого получаются два приема:

<!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>

Кольцо: без смещения, без размытия, только spread. В отличие от рамки, оно не меняет размер элемента, поэтому это хороший индикатор фокуса (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Кольцо с зазором: положите белый spread под цветной, более широкий.
Только с одной стороны: сместите тень вниз и уменьшите ее отрицательным spread, чтобы она выглядывала только снизу.

Многослойные тени для реалистичной глубины

У настоящих теней есть темная четкая часть рядом с объектом и мягкая бледная часть подальше. Два-три слоя имитируют это гораздо лучше, чем одно большое размытие:

<!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>

Первая тень в списке рисуется сверху. Делайте цвет теней полупрозрачным черным или темным оттенком фона, но не чистым серым, чтобы они затемняли то, что под ними.

Внутренние тени inset

inset рисует тень внутри области padding, как будто поверхность вдавлена. Это подходит для текстовых полей, углублений и нажатых кнопок:

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%);
}

Внутренняя тень рисуется над фоном, но под содержимым. Тени, которые повторяют форму букв, а не блока, это тень текста text-shadow.

Частые ошибки

Чисто черные, полностью непрозрачные тени. Они выглядят как темная обводка. Используйте альфу от 10% до 30%.
Одно огромное размытие для глубины. Сочетайте маленькую четкую тень с большой мягкой.
Тень обрезана по краю. Ее обрезает предок с overflow: hidden; добавьте предку padding или перенесите правило overflow.
Отрицательное размытие. Оно невалидно, и все объявление игнорируется.
Анимация box-shadow на многих элементах. Она перерисовывается каждый кадр. На тяжелых страницах лучше анимировать opacity псевдоэлемента, который несет большую тень.

Часто задаваемые вопросы

Какой синтаксис у box-shadow?

box-shadow: offset-x offset-y blur spread color;, например box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Обязательны только два смещения; добавьте inset, чтобы тень рисовалась внутри блока.

Что делает spread в box-shadow?

Увеличивает (положительное значение) или уменьшает (отрицательное) тень до размытия. Тень без смещения, без размытия и со spread 3px это сплошное кольцо толщиной 3px вокруг элемента.

Как сделать тень только снизу?

Сместите ее вниз и втяните отрицательным spread, чтобы исчезли бока: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

Влияет ли box-shadow на раскладку?

Нет. Тень не занимает места и не сдвигает другие элементы, поэтому это хороший способ добавить кольцо фокуса или приподнятость при наведении без сдвига раскладки. Ее может обрезать overflow: hidden у предка.

Можно ли задать несколько теней box-shadow?

Да, через запятую. Первая тень рисуется сверху. Сочетание маленькой четкой тени с большой мягкой выглядит естественнее одной большой тени.

Связанные концепции