Как сделать тень у картинки в css

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

Работа с box-shadow позволяет контролировать направление и интенсивность тени. Например, смещение по оси X подчёркивает ориентацию блока, а изменение радиуса размытия меняет степень рассеивания. Цвет тени желательно подбирать по фактическим значениям фона: разница в 10–15% яркости обычно даёт аккуратный переход без резких границ.

Для изображений с прозрачностью полезен filter: drop-shadow, поскольку он рассчитывает границы по пиксельной маске. Это позволяет обрабатывать PNG и SVG, где обычный box-shadow создаёт прямоугольный контур. Такой подход подходит для иконок, фигурных вырезов и любых элементов со сложной формой.

Перед настройкой параметров стоит учитывать плотность окружения на странице: если рядом располагаются элементы с собственной тенью, следует выстраивать единый набор значений, иначе визуальный баланс нарушается. Тени с одинаковым направлением и пропорциями помогают поддерживать аккуратную структуру интерфейса.

Настройка базовой тени через свойство box-shadow

Для изображения базовая тень строится на четырёх числах: смещение по оси X, смещение по оси Y, радиус размытия и радиус растяжения. Минимальный рабочий набор выглядит так: box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);. При таких значениях тень остаётся мягкой, не перетягивает внимание и создаёт аккуратный визуальный слой.

Если изображение расположено рядом с текстовыми блоками, смещение по оси Y рекомендуется увеличивать до 6–8 px, чтобы граница не сливалась с соседними элементами. При плотной верстке горизонтальное смещение лучше удерживать в диапазоне 0–2 px, иначе возникает эффект перекоса.

Радиус размытия определяет характер перехода. Для компактных карточек подойдут значения 10–14 px; широким изображениям требуется диапазон 16–22 px, чтобы тень не выглядела слишком резкой. Радиус растяжения применяют только при необходимости получить более широкое основание: положительные значения усиливают присутствие тени, отрицательные – уменьшают визуальный след.

Цвет тени стоит подбирать по фону. На светлой поверхности работает прозрачный чёрный с параметрами rgba(0, 0, 0, 0.18–0.28). На тёмной поверхности лучше перейти на светлый тон: rgba(255, 255, 255, 0.12–0.18). Такой подбор помогает сохранить читаемость границ и избежать паразитных контуров.

Создание мягкой рассеянной тени для фотографий

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

• Используйте размытие от 24 до 40 px – этого достаточно, чтобы тень стала плавной и не создавала заметной границы.
• Смещение по оси Y держите в пределах 8–12 px, чтобы избежать эффекта «плотной подложки» под фотографией.
• Смещение по оси X лучше оставить в диапазоне −2…2 px, чтобы тень не уводила композицию в сторону.
• Цвет тени подбирайте с прозрачностью 0.15–0.25 для светлых фонов и 0.10–0.16 для тёмных.

При использовании крупных фотографий можно добавить растяжение 2–4 px, чтобы увеличить площадь рассеивания. Для снимков со сложным контуром имеет смысл комбинировать несколько слоёв тени.

1. Первый слой – большое размытие и низкая плотность для общего рассеивания.
2. Второй слой – менее размыт и смещён на 2–4 px ниже для формирования лёгкого опорного акцента.

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

Добавление многослойной тени для выразительного объёма

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

Базовый подход строится на последовательном наложении трёх теней. Верхний слой создаёт лёгкое свечение вокруг границы: размытие 18–24 px, смещение 0–2 px, прозрачность 0.12–0.18. Средний слой добавляет вес: размытие 10–14 px, смещение 4–6 px по оси Y, плотность 0.18–0.26. Нижний слой формирует опорную линию с малым размытием в пределах 4–6 px и смещением 8–10 px.

Для крупных изображений можно расширить диапазон размытия всех слоёв на 4–6 px, чтобы тени не выглядели слишком плотными. В макетах с тёмным фоном оттенок верхнего слоя лучше слегка осветлить, иначе граница становится чрезмерно тяжёлой.

Если изображение имеет сложную форму и заметные выпуклости, можно добавить дополнительный слой с минимальной прозрачностью и большим размытием (30–36 px). Такой слой создаёт мягкое обрамление, подчёркивая контрастную геометрию без перенасыщения.

Применение тени только к границам изображения с помощью wrapper-контейнера

Чтобы тень не ложилась на само изображение, его помещают в wrapper-контейнер. Тень применяется к контейнеру, а не к графике, благодаря чему границы остаются чёткими, без затемнения пикселей по краю.

Размер wrapper-контейнера соответствует размерам изображения, при этом дополнительные отступы не требуются. Достаточно задать контейнеру box-shadow, а самому изображению – блочный формат отображения, чтобы избежать случайных разрывов.

При использовании контейнера важно учитывать, что тень визуально воспринимается как часть рамки. Поэтому параметры смещения и размытия лучше держать в умеренных значениях: смещение 2–6 px по оси Y, размытие 8–14 px, прозрачность 0.18–0.26. Такие настройки дают заметный, но аккуратный контур вокруг внешних границ.

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

Использование фильтра drop-shadow для PNG с прозрачностью

Фильтр drop-shadow обрабатывает форму по альфа-каналу, поэтому тень повторяет контур PNG, а не прямоугольную область. Это позволяет корректно отображать силуэтные элементы, иконки и объекты со сложным краем.

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

Для PNG с мелкими деталями стоит уменьшить размытие до 4–8 px, чтобы сохранить точность перехода. При работе с крупными элементами параметр можно расширить, но желательно следить, чтобы тень не перекрывала соседние объекты.

Адаптация параметров тени под тёмные и светлые фоны

Цвет и прозрачность тени напрямую влияют на восприятие изображения на разных фонах. На светлых поверхностях используют тёмные оттенки с прозрачностью 0.15–0.25, чтобы контур был заметен, но не создавал резких границ.

На тёмных фонах предпочтительнее светлые оттенки с прозрачностью 0.10–0.18. Это обеспечивает читаемость контура и предотвращает эффект «поглощения» тени фоном.

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

Рекомендуется проверять тень на фонах с градиентом или текстурой. В таких случаях небольшое уменьшение размытия на 2–4 px и снижение прозрачности на 0.02–0.05 помогает избежать чрезмерного контраста и сохранить аккуратный силуэт.

Смещение по осям X и Y стоит удерживать в пределах 0–6 px для всех типов фонов, корректируя только радиус размытия и цвет, чтобы тень выглядела естественно и не мешала восприятию содержимого.

Вопрос-ответ:

Как правильно выбрать параметры box-shadow для маленькой иконки?

Для маленьких изображений смещение по осям X и Y обычно не превышает 2–4 px, а радиус размытия держат в пределах 4–8 px. Прозрачность рекомендуется 0.15–0.22, чтобы тень была заметна, но не перегружала мелкую деталь. Цвет тени стоит подбирать с учётом фона: на светлом фоне — тёмные оттенки, на тёмном — светлые. Малые размеры требуют аккуратного баланса между размерами тени и самой иконкой, иначе контур выглядит тяжёлым.

Почему box-shadow иногда делает тень прямоугольной даже у изображения с прозрачностью?

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

Как создать мягкую рассеянную тень, чтобы она не выглядела грубой на фотографиях?

Мягкая тень достигается увеличенным радиусом размытия и пониженной прозрачностью. Для стандартной фотографии можно задать размытие 24–36 px, смещение по Y 8–10 px, по X −2…2 px и прозрачность 0.15–0.25. Для крупных изображений радиус размытия увеличивают до 40 px. Также можно добавить второй слой с меньшим смещением и прозрачностью, чтобы усилить плавный переход без жёстких границ.

Когда стоит использовать wrapper-контейнер для тени изображения?

Wrapper-контейнер нужен, если тень не должна ложиться на само изображение. Тень применяется к контейнеру, оставляя изображение чистым. Такой подход удобен для карточек, иконок или фотографий, где важно сохранить точность цвета и деталей на краях. При этом параметры смещения и размытия лучше подбирать умеренно: смещение Y 4–6 px, размытие 8–14 px, прозрачность 0.18–0.26. Можно добавить второй слой для мягкой подложки.

Как адаптировать тень под тёмные и светлые фоны на странице?

Для светлых фонов используют тёмные оттенки с прозрачностью 0.15–0.25. Для тёмных фонов выбирают светлые оттенки с прозрачностью 0.10–0.18. Если тень многослойная, прозрачность каждого слоя корректируют отдельно: верхний слой для рассеивания более прозрачный, нижний слой для смещения чуть плотнее. Также стоит проверять тень на текстурированных или градиентных фонах и при необходимости снижать размытие на 2–4 px и прозрачность на 0.02–0.05, чтобы контур оставался аккуратным.