CSS: несколько теней в box-shadow — делаем сложные эффекты

Свойство box-shadow в CSS позволяет добавлять тени к блокам. Одна тень — это уже неплохо, но по-настоящему выразительные эффекты получаются, когда накладывают сразу несколько теней. Это частый приём в интерфейсах: с его помощью делают «слоистый» объём, градиентные тени, свечение, имитацию рельефа и другие визуальные приёмы.

Как задать несколько теней

Синтаксис одной тени выглядит так:

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

• offset-x и offset-y — смещение по горизонтали и вертикали (в пикселях).
• blur-radius — радиус размытия: чем больше, тем мягче тень.
• spread-radius — «разрастание» тени: положительное значение увеличивает тень, отрицательное — уменьшает.
• color — цвет тени (можно использовать rgba для прозрачности).

Чтобы добавить несколько теней, их перечисляют через запятую. Браузер рисует их в порядке объявления: первая тень оказывается «ниже», последующие — поверх неё.

.element {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

В этом примере три тени с нарастающим смещением и размытием — получается более глубокий и мягкий эффект.

Частые сценарии и примеры

1. «Многослойная» тень для глубины

Приём, когда тени идут с увеличивающимися параметрами. Это визуально усиливает ощущение объёма.

<div class="card">Карточка с многослойной тенью</div>

.card {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 3px 6px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

Здесь каждая следующая тень чуть дальше и чуть темнее. Такой стиль часто используют для карточек в галереях и лендингах.

2. Тень с «свечением» (имитация неонового эффекта)

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

.neon-box {
  background: #fff;
  color: #000;
  padding: 16px;
  border-radius: 6px;
  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.4),
    0 0 16px rgba(255, 215, 0, 0.3),
    0 0 24px rgba(255, 215, 0, 0.2);
}

Обратите внимание: offset-x и offset-y равны нулю, а основной параметр — blur-radius. Цвет подбирают под нужный оттенок «света».

3. Имитация рельефа: тень сверху и снизу

Иногда нужно показать, что элемент «приподнят» или «вдавлен». Для этого используют тени с разными направлениями.

Пример «приподнятой» кнопки:

.btn-raised {
  background: #3b8ed0;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  box-shadow:
    0 -4px 6px -2px rgba(0, 0, 0, 0.15), /* тень сверху — как будто свет сверху */
    0 4px 8px rgba(0, 0, 0, 0.2);        /* тень снизу — основной объём */
}

Тень сверху с отрицательным смещением и небольшим «сжатием» (spread-radius отрицательный) создаёт ощущение, что свет падает сверху, а элемент слегка приподнят.

4. «Длинная» падающая тень

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

.long-shadow {
  background: #f5f5f5;
  padding: 20px;
  box-shadow:
    12px 12px 24px rgba(0, 0, 0, 0.12),
    24px 24px 36px rgba(0, 0, 0, 0.08);
}

Такой эффект уместен в минималистичных макетах, где тень подчёркивает положение элемента в пространстве.

5. Разные цвета теней для художественного эффекта

Можно смешивать тени разных цветов. Чаще всего это делают для стилизации под ретро, «глитч» или просто для выразительности.

.colorful-shadow {
  background: white;
  padding: 16px;
  box-shadow:
    4px 4px 6px rgba(255, 0, 0, 0.2),
    -4px -4px 6px rgba(0, 0, 255, 0.2);
}

Две тени противоположных цветов создают лёгкий цветной контур. Важно не переборщить: такие эффекты быстро становятся навязчивыми.

Важные нюансы и частые ошибки

• Порядок имеет значение. Тени накладываются друг на друга в порядке объявления. Если хотите, чтобы одна тень была «под» другой, ставьте её первой.
• Производительность. Очень много теней (десятки) и сильное размытие могут нагружать рендеринг, особенно на мобильных устройствах. Для карточек и кнопок 2–4 тени — разумный максимум.
• Прозрачность через rgba. Использование полупрозрачных цветов делает тени естественнее. Полностью непрозрачные тени выглядят «жёстко».
• Сочетание с border-radius. Скруглённые углы и тени хорошо работают вместе, но при очень сильном размытии тень может «вылезать» за границы родителя, если у родителя нет overflow: hidden.

Практический пример: кнопка с тенью и ховер-эффектом

<button class="btn-soft">Кнопка с тенью</button>

.btn-soft {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(74, 144, 226, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.btn-soft:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(74, 144, 226, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.16);
}
 
.btn-soft:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1);
}

При наведении кнопка слегка «всплывает», а тени становятся глубже. При нажатии — тень уменьшается, имитируя нажатие.