Тень блока

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

Тень строится от рамки элемента, а не от его содержимого. Если у блока есть скругление углов, тень тоже будет скруглённой. Места в раскладке она не занимает: соседние блоки не сдвигаются, но и родитель с overflow: hidden её обрежет.

Из чего состоит значение

.card {
  /* смещение X, смещение Y, размытие, растяжение, цвет */
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / .08),
              0 8px 24px -4px rgb(0 0 0 / .12);
}
.field:focus-visible {
  box-shadow: inset 0 0 0 2px #2563eb;
}

• Смещения сдвигают тень вправо и вниз; отрицательные значения — влево и вверх.
• Размытие делает край мягким, ноль даёт чёткий контур.
• Растяжение увеличивает или уменьшает тень относительно блока; отрицательное значение помогает получить тень только снизу.
• inset переносит тень внутрь, как будто блок вдавлен.

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

Чем заменить и когда осторожнее

Для картинок с прозрачностью, например PNG-иконки неправильной формы, box-shadow даст прямоугольную тень. Тень по контуру рисует фильтр filter: drop-shadow(). Для текста есть отдельное свойство — тень текста, без растяжения и inset.

Анимировать большую размытую тень дорого: браузер на каждом кадре заново выполняет перерисовку области. Плавнее работает приём с псевдоэлементом, у которого тень уже нарисована, а анимируется только его прозрачность. И ещё одна деталь: в режиме принудительных цветов Windows тени отключаются, поэтому рамку фокуса надёжнее делать через outline, а тень оставить украшением.