box-shadow: добавляем тени, контролируем размытие и распространение (CSS)

Тени в CSS делают элементы объёмнее и помогают выделить их на фоне. За это отвечает свойство box-shadow. Оно кажется простым, но у него есть нюансы: от значений смещения до того, как тень ведёт себя с border-radius и overflow. Разберём всё по делу и с примерами.

Базовый синтаксис

selector {
  box-shadow: [смещение по X] [смещение по Y] [размытие] [распространение] [цвет];
}

Пример:

.card {
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.2);
}

Что значит каждое значение:

• 10px (X) — тень смещена вправо на 10 px.
• 10px (Y) — тень смещена вниз на 10 px.
• 20px (размытие) — радиус размытия (чем больше, тем мягче края тени).
• 5px (распространение) — тень становится больше исходного блока на 5 px во все стороны.
• rgba(0,0,0,0.2) — чёрный цвет с прозрачностью 20 %.

Если не указать распространение, оно считается равным 0.

Как параметры реально влияют на вид

Смещение (X и Y)

Смещение задаёт, куда «падает» тень. Отрицательные значения тянут тень влево и вверх:

.shadow-left-top {
  box-shadow: -8px -8px 16px rgba(0, 0, 0, 0.15);
}

Это частый приём для «лёгкой» тени сверху и слева — элемент будто приподнят.

Размытие (blur)

Чем больше значение размытия, тем мягче тень. Маленькие значения дают чёткие края, большие — «дымку».

/* жёсткая тень */
.hard {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}
 
/* мягкая тень */
.soft {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

Для карточек и кнопок чаще используют мягкие тени — они выглядят современнее.

Распространение (spread)

Этот параметр увеличивает или уменьшает саму тень относительно размеров элемента.

/* тень больше блока */
.expanded {
  box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
}
 
/* тень меньше блока (редкий случай) */
.contracted {
  box-shadow: 0 0 8px -4px rgba(0, 0, 0, 0.1);
}

Минус в spread делает тень компактнее — это можно использовать для аккуратных рамок-теней.

Несколько теней сразу

Можно перечислить несколько теней через запятую. Они накладываются слоями: первая сверху, последняя — ниже.

.multi-shadow {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.06);
}

Такой приём даёт «слоистый» объём: ближняя тень чётче, дальние — мягче и дальше. Это популярный паттерн для карточек.

Внутренняя тень: inset

По умолчанию тень снаружи. Чтобы сделать её внутри элемента, добавляют ключевое слово inset:

.inset-shadow {
  width: 200px;
  height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

inset полезен для:

• эффекта вдавленной кнопки;
• выделения активной области;
• «рамки‑тени» внутри контейнера.

Тени и border-radius: углы без артефактов

Когда у элемента скруглённые углы, тень повторяет их форму. Это плюс: тень выглядит аккуратно. Но бывают проблемы.

Проблема: при очень сильном размытии и большом смещении тень может «отрываться» от углов, особенно на контрастном фоне.

Решение: подбирайте баланс: для карточек обычно хватает 0 4px 12px rgba(0,0,0,0.1). Если нужно сильнее — добавляйте вторую, более мягкую тень вместо одной огромной.

overflow: hidden и обрезанные тени

Если у родителя стоит overflow: hidden, тень может обрезаться по границам родителя.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
  height: 100px;
  overflow: hidden; /* тень обрежется */
}
 
.child {
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Как исправить:

1. Убрать overflow: hidden, если он не нужен для обрезки контента.
2. Если overflow обязателен (например, для скругления родителя), перенести тень на сам родитель или использовать псевдоэлемент.
3. Либо сделать дочерний элемент чуть меньше и добавить внутренние отступы, чтобы тень не упиралась в край.

Практические примеры

Кнопка с аккуратной тенью

<a href="#" class="btn">Нажми меня</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* тень в цвет кнопки, но прозрачнее */
}
 
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(52, 152, 219, 0.4);
}

Здесь тень не чёрная, а в тон кнопке — это делает дизайн мягче и современнее. При наведении тень усиливается, а кнопка слегка «всплывает».

Карточка товара: слоистая тень

.product-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.1),
    0 24px 48px rgba(0, 0, 0, 0.06);
}

Три тени дают ощущение, что карточка «парит» над фоном.

Вдавленное поле ввода

.input-inset {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

Внутренняя тень создаёт эффект лёгкой вдавленности — поле выглядит интерактивным.

Частые ошибки и как их избежать

• Слишком сильная тень. Тень с большим смещением и размытием выглядит «грязно» и отвлекает. Лучше несколько мягких теней, чем одна огромная.
• Чёрный цвет на 100 % непрозрачности. Жёсткие чёрные тени выглядят устаревшими. Используйте полупрозрачные цвета и подбирайте оттенок под фон или цвет элемента.
• Тень обрезается из‑за overflow. Всегда проверяйте, не «съедает» ли родитель тень.
• Много теней на мелких элементах. На маленьких кнопках или иконках 3–4 тени будут выглядеть избыточно. Достаточно одной мягкой.
• Игнорирование контраста. На тёмном фоне тень может быть почти не видна. На светлом фоне слишком сильная тень будет резать глаз. Подбирайте интенсивность под контекст.