CSS drop-shadow: руководство и примеры

Сравнение эффектов drop-shadow и box-shadow

Хотя дизайнерские тренды меняются, два приёма теней в CSS — box-shadow и drop-shadow — остаются базовыми инструментами, которые влияют на восприятие интерфейса. drop-shadow особенно полезен, когда нужно, чтобы тень соответствовала форме изображения или объединённой группы элементов.

Что такое drop-shadow в CSS?

drop-shadow() — это CSS-фильтр, который рисует тень по контуру видимой области объекта. Его обычно применяют через свойство filter.

Синтаксис:

/* Syntax */
filter: drop-shadow(offset-x offset-y blur-radius color);

Параметры в кратком виде:

offset-x — смещение по горизонтали; отрицательное значение сдвинет тень влево.
offset-y — смещение по вертикали; отрицательное значение поднимет тень вверх.
blur-radius — радиус размытия; по умолчанию 0; не может быть отрицательным.
color — цвет тени; если не задан, берётся значение свойства color.

Фильтры в CSS включают и другие функции, например blur(), brightness(), contrast() и т.д. drop-shadow принимает параметры типа , за исключением ключевого слова inset и параметра spread, которые не поддерживаются.

Когда drop-shadow особенно полезен

Ниже — сценарии, где drop-shadow даёт преимущество перед box-shadow.

Нерегулярные (непрямоугольные) формы

Если у вас прозрачный PNG или SVG со сложным контуром (например, звезда), box-shadow создаст прямоугольную тень вокруг рамки изображения. drop-shadow же рисует тень по фактическому контуру элемента.

Пример HTML:




  
  
  
  
  Drop-shadow

CSS:

.star-img img {
  display: inline-block;
  height: 15em;
  width: 25em;
}

.box-shadow {
  /* box-shadow рисует вокруг прямоугольной рамки */
  box-shadow: 0.60em 0.60em 0.2em;
}

.drop-shadow {
  /* drop-shadow следует контуру картинки */
  filter: drop-shadow(0.60em 0.60em 0.2em);
}

Box-shadow versus drop-shadow on SVG

На выводе видно: box-shadow даёт прямоугольную тень, а drop-shadow — тень по форме изображения.

Группировка элементов

Когда вы накладываете несколько элементов, например картинку и текст, и хотите общую тень для всей группы, drop-shadow можно применить к родителю: тогда тень рисуется для уже объединённой видимой области. box-shadow в таком случае будет отрисовываться для каждого элемента отдельно.

HTML (фрагмент):


  
    
      
    
    
      Live in the moment
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores.

Основной CSS (сокращённо):

.parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; }
.image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; }
.text-container { background-color: rgb(141 0 35); width: 30rem; padding: 3rem; position: relative; }

/* Применение тени */
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0,0,30,0.5)); }
.box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0,0,30,0.3); }

Drop-shadow and box-shadow on grouped elements

На рисунке видно, что drop-shadow создаёт одну объединённую тень для контейнера, тогда как box-shadow даёт тень вокруг каждого блока отдельно.

Обрезанные элементы (clip-path)

Если вы используете clip-path, то drop-shadow применяется только к видимой части элемента. Это удобно для круглых аватаров и других нестандартных масок.

HTML + CSS (фрагмент):

.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); }
.clipped-element {
  width: 50em; height: 50em; margin: 0 auto;
  background-image: url(smiling-girl.jpg);
  clip-path: circle(50%);
  background-size: cover; background-repeat: no-repeat;
}

Applying drop-shadow on clipped elements

Тень следует только видимому кругу, а не полной прямоугольной области.

Ограничения и отличия

drop-shadow не поддерживает spread и inset. Это значит, что эффект увеличения «поля» тени (outline) невозможен через drop-shadow.
box-shadow следует модели коробки (CSS Box Model) и будет применён к рамке элемента. drop-shadow игнорирует коробку и использует видимый контур.
text-shadow — отдельный механизм для текста. Даже при одинаковых параметрах визуальное смещение и насыщенность тени могут отличаться от drop-shadow и box-shadow.

Пример сравнения трёх типов (фрагмент):

.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); }
.box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; }
.text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }

Drop-shadow versus box-shadow versus text-shadow

Видно, что box-shadow даёт более тяжёлую и тёмную тень, а text-shadow и drop-shadow могут отличаться по положению и размытию.

Поддержка браузеров и откат (fallback)

drop-shadow поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari). Основной исключение — устаревшие версии Internet Explorer. Если вам важна обратная совместимость, добавьте feature query и запасной вариант с box-shadow, либо применяйте прогрессивное улучшение:

@supports (filter: drop-shadow(0 0 0 #000)) {
  .avatar { filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); }
}
@supports not (filter: drop-shadow(0 0 0 #000)) {
  .avatar { box-shadow: 0 6px 12px rgba(0,0,0,.25); }
}

Важно: box-shadow в fallback не всегда повторит контур прозрачного изображения, поэтому при критичной необходимости контура можно генерировать SVG-тень или использовать псевдоэлемент с маской.

Практические советы и рекомендации

Cheat sheet — быстрая шпаргалка:

Для фигурных PNG/SVG используйте drop-shadow.
Для общего блочного отступа/псевдоконтейнера используйте box-shadow.
Если нужна «обводка» вокруг объекта, используйте box-shadow с несколькими слоями или SVG-фильтры; spread в box-shadow поможет добиться outline-эффекта.
Для групповых теней применяйте drop-shadow к родителю.
Для производительности избегайте сильного blur на многих элементах одновременно — это нагружает рендер.

Оптимизация и производительность:

Фильтры могут вызвать создание новых слоёв композитинга в браузере. Применяйте их выборочно.
Используйте transform: translateZ(0) или will-change: filter аккуратно — это может улучшить плавность, но увеличит потребление памяти.

Цвет и контраст:

Выбирайте полупрозрачные цвета (rgba/hsla) для естественных теней.
Для тёмного фона уменьшайте насыщенность и смещайте тень ближе к объекту.

Когда drop-shadow не подходит (примеры ошибок)

Нужна «распростёртая» тень с spread — drop-shadow не поддерживает spread.
Требуется точный outline вне видимого контура (например, для печати/экспортов) — лучше SVG или box-shadow с дополнениями.
Плохая производительность на странице с сотнями элементов, у каждого из которых включён blur-фильтр.

Альтернативные подходы

SVG-фильтры (feDropShadow) дают больше контроля и совместимы с векторной графикой.
Использовать псевдоэлементы (::before/::after) с маской для создания кастомных теней.
Создать отдельный растровый слой с тенью в графическом редакторе, если тень статична и критична по внешнему виду.

Ментальные модели (как думать о тенях)

box-shadow: «тень вокруг коробки» — думайте про прямоугольную рамку и её отступы.
drop-shadow: «тень вокруг видимого контура» — думайте про силуэт объекта.
text-shadow: «тень для символов» — работает на уровне глифов.

Ролевые чеклисты

Для дизайнера:

Проверить силу и цвет тени на светлом и тёмном фоне.
Оценить, нужна ли фигурная тень (drop-shadow) или блоковая (box-shadow).

Для фронтенд-разработчика:

Проверить поддержку браузеров и добавить @supports при необходимости.
Оценить влияние на производительность и при необходимости заменить фильтры на статические изображения или SVG.

Для QA:

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

Критерии приёмки

Тень соответствует дизайн-макету на ключевых разрешениях.
Если использован drop-shadow, тень следует видимому контуру, а не рамке.
Производительность страницы не ухудшилась заметно (возможность отката).
Наличие fallback для устаревших браузеров при критичной визуальной необходимости.

Краткое сравнение

Свойство	box-shadow	drop-shadow	text-shadow
Подчинён box model	Да	Нет	Нет
Работает для SVG/PNG контура	Частично	Да	Нет
Поддержка spread	Да	Нет	Нет
Подходит для групповых теней	Нет (каждый элемент)	Да	Нет

Пример: быстрый рабочий паттерн

Если нужно, чтобы аватар и подпись имели общую мягкую тень:


  
  Имя пользователя

.card { filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.avatar { width: 4rem; height: 4rem; border-radius: 50%; }

Это создаст одну мягкую тень для видимого объединённого силуэта.

Итог

drop-shadow — мощный инструмент для получения естественных, фигурных теней вокруг изображений и объединённых элементов. box-shadow остаётся незаменимым для блочной оболочки, spread‑эффектов и простых UI-теней. Выбирайте инструмент, исходя из задачи: контур или рамка, производительность или точность внешнего вида.

Важно: тестируйте тени на разных фонах и при разных масштабах, добавляйте fallback для старых браузеров и учитывайте влияние фильтров на производительность.