CSS drop-shadow: что это, когда использовать и как отличается от box-shadow

Кратко

drop-shadow — фильтр CSS, создающий тень, которая повторяет видимую форму элемента (включая прозрачность). Используйте его, когда нужно тень по контуру произвольного изображения, для группированных элементов или обрезанных форм. В большинстве современных браузеров поддержка хорошая; для старых можно оставить box-shadow как запасной вариант.

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

Функция filter: drop-shadow() выводит тень вокруг видимой формы указанного объекта. Это фильтр, который создаёт тень, учитывая альфа-канал (прозрачность) изображения или видимую область элемента.

Синтаксис:

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

В CSS есть множество фильтров, например blur(), brightness() и drop-shadow().

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

Важно: drop-shadow принимает параметры типа , но не поддерживает ключевое слово inset и параметр spread (растягивание).

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

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

Неректангулярные формы

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

HTML

CSS

.star-img img {  

display: inline-block;  

height: 15em;  

width: 25em;  

}  

.box-shadow {  

color: red;  

box-shadow: 0.60em 0.60em 0.2em;  

}  

.drop-shadow {  

filter: drop-shadow(0.60em 0.60em 0.2em);  

}

Вывод:

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

Сгруппированные элементы

Когда несколько элементов перекрываются и должны отбрасывать одну общую тень (например, картинка + текст в карточке), box-shadow применится к каждому элементу отдельно. Если фильтр drop-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. Modi, corrupti commodi quisquam ex numquam incidunt.
  

  

  

Basic CSS

body {  

padding: 5em 1em;  

font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',  

'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  

}  

h2 {  

font-size: 2rem;  

}  

p {  

font-size: 0.8rem;  

}  

.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 {  

color: rgb(255, 236, 236);  

background-color: rgb(141 0 35);  

width: 30rem;  

padding: 3rem;  

align-self: flex-end;  

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

}

Вывод:

Как видно, box-shadow создаёт тень у каждого блока отдельно, а drop-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;  

}

Вывод:

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

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

• drop-shadow не поддерживает spread, поэтому создать «обводку» тенью не получится.
• drop-shadow, box-shadow и text-shadow с одинаковыми числовыми параметрами всё равно будут визуально отличаться: box-shadow чаще выглядит плотнее и темнее.
• drop-shadow действует на видимую форму (учитывает альфа-канал), а box-shadow опирается на прямоугольную рамку элемента и коробочную модель.

Пример сравнения в исходном материале:

  

  

Every MUO article will bring you one step closer.
  

  

Every MUO article will bring you one step closer.  

  

  

Every MUO article will bring you one step closer.  

  

  

и CSS:

.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 поддерживается во всех современных движках (Chromium, Firefox, WebKit). Internet Explorer не поддерживает filter в том же объёме; для старых окружений оставьте box-shadow как резерв.

Совет: используйте feature query или прогрессивное улучшение: сначала box-shadow как запасной вариант, затем filter: drop-shadow для современного UX.

Практическая шпаргалка (cheat sheet)

• Порядок параметров: offset-x offset-y blur-radius color
• Отрицательные offset-x смещают тень влево; отрицательные offset-y — вверх.
• blur-radius ≥ 0.
• Цвет можно задавать rgba()/hex/hsl. Если не указывать цвет, берётся свойство color элемента.
• Не поддерживается inset и spread.

Примеры:

/* мягкая тень по контуру картинки */
filter: drop-shadow(0.2rem 0.2rem 0.6rem rgba(0,0,0,0.35));

/* тень без размытия, смещённая влево */
filter: drop-shadow(-0.3rem 0rem 0 rgba(0,0,0,0.5));

Когда drop-shadow НЕ подходит

• Когда нужно расширить тень (spread), например для обводки — тогда нужен box-shadow или дополнительный элемент.
• Когда вам важна совместимость с очень старыми браузерами (IE).
• Когда требуется inset-эффект — drop-shadow не умеет inset.

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

• box-shadow: хорошо для прямоугольных блоков, поддерживает spread и inset.
• text-shadow: специализирован для текста, даёт другую визуальную жёсткость.
• SVG feDropShadow: мощный и гибкий, позволяет более точную настройку и анимацию в векторной среде.
• псевдоэлементы (::before/::after) с размытой копией как запасной вариант для сложных outline-эффектов.

Эвристики и ментальные модели

• Если тень должна повторять форму видимой части — думайте о drop-shadow.
• Если тень — «внешняя рамка» элемента по коробочной модели — используйте box-shadow.
• Для групповых композиций сначала подумайте, к какому контейнеру применить тень: к каждому элементу или к родителю.

Чек-листы ролей

Дизайнер:

• Убедиться, что тень соответствует визуальному стилю (мягкая/жёсткая).
• Проверить тень на тёмных и светлых фонах.

Фронтенд-разработчик:

• Протестировать поведение на прозрачных изображениях и clip-path.
• Добавить fallback для старых браузеров, если критично.
• Не забыть об оптимизации перерисовок (фильтры могут быть затратными для GPU).

QA/тестировщик:

• Проверить позиционирование тени при разных масштабах и DPI.
• Проверить печатные и contrast-режимы (тень может мешать читаемости).

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

• Тень повторяет форму видимой части изображения (для требований дизайна).
• На всех поддерживаемых браузерах тень выглядит согласованно; предусмотрен fallback.
• Производительность в критичных экранах не ухудшена (профилирование при большом количестве элементов).

Мини-методология внедрения

1. Согласовать визуальный образ тени с дизайнером.
2. Реализовать в коде с filter: drop-shadow и проверить на всех целевых разрешениях.
3. Добавить box-shadow fallback, если нужна совместимость.
4. Написать тест-кейсы и прогнать QA.

Рекомендации по производительности

Filter-эффекты могут быть дороже для рендера, особенно при анимации большого количества элементов. Для анимируемых тёмных/светлых эффектов предпочитайте transform/opacity, а тени фиксируйте в статичных элементах.

Вывод

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

Ключевые выводы:

• drop-shadow учитывает форму элемента и альфа-канал;
• не поддерживает spread и inset;
• удобен для SVG/PNG и clip-path;
• требователен к рендерингу при большом количестве элементов.

Дополнительные материалы: поиграйте с параметрами offset и blur, сравните с SVG feDropShadow для тонкой настройки и помните про производительность при анимации.