Добавить тень к изображению

Инструмент Добавить тень к изображению поднимает любую картинку над страницей мягкой, правдоподобной тенью — целиком в вашем браузере. Загрузите фото, скриншот, логотип или вырезанный PNG, перетащите источник света, чтобы задать угол, затем настройте размытие, расширение, непрозрачность и цвет. На прозрачном PNG тень строится по альфа-каналу изображения, поэтому товар или стикер отбрасывает тень по собственному контуру, а не по прямоугольнику. Экспортируйте PNG с прозрачным фоном, JPG на сплошном или градиентном фоне либо скопируйте соответствующий код CSS box-shadow. Ничего не загружается на сервер — ваше изображение никогда не покидает устройство.

Три числа, из которых состоит тень: смещение, размытие и расширение

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

Как добавить тень к изображению

1. Загрузите изображение: перетащите картинку в область загрузки или нажмите, чтобы выбрать файл. Ничего не загружается на сервер — файл читается прямо в браузере.
2. Расположите свет: перетащите солнышко на площадке Источник света. Тень падает в противоположную сторону, а перетаскивание дальше от центра отодвигает её сильнее. Работают и стрелки клавиатуры.
3. Сформируйте тень: выберите тип — Падающая, Многослойная, Длинная или Свечение — затем задайте Размытие, Расширение, Непрозрачность и цвет тени.
4. Выберите фон: оставьте его Прозрачным для PNG или залейте сплошным цветом либо градиентом. Дополнительный отступ добавляет воздух вокруг результата.
5. Скачайте или скопируйте: сохраните PNG или JPG в исходном, половинном или 2× размере — либо скопируйте сгенерированный CSS, чтобы применить ту же тень к веб-элементу.

Тени, которые повторяют объект, а не прямоугольник

Большинство онлайн-инструментов тени рисуют прямоугольник за вашим файлом. Для фото это нормально, но для вырезанного предметного снимка, логотипа или стикера это ошибка: круглая бутылка не должна отбрасывать квадратную тень. Этот инструмент читает альфа-канал изображения и строит тень по реальному силуэту, поэтому прозрачные области остаются без тени. Загрузите прозрачный PNG — появится зелёная заметка, подтверждающая это. Для обычного непрозрачного фото силуэт — просто прямоугольник снимка, предварительно скруглённый, если задан радиус углов.

Какой тип тени выбрать?

Почему проценты, а не пиксели

Каждый ползунок здесь — это процент от короткой стороны изображения. Размытие 9% выглядит одинаково на миниатюре 400 px и на фото 4000 px, поэтому понравившийся пресет продолжает работать, когда вы подставляете более крупное изображение — без пересчёта. Инструмент всё равно показывает эквивалентное значение в пикселях рядом с ползунком размытия и в панели CSS, когда нужны реальные числа.

Советы для правдоподобной тени

Изображение остаётся конфиденциальным?

Да. В отличие от онлайн-редакторов, которые загружают картинку на сервер для обработки, этот инструмент работает целиком в вашем браузере с помощью HTML5 canvas. Изображение никогда не покидает устройство, ничего не сохраняется, аккаунт создавать не нужно. Закройте вкладку — и изображение исчезнет.

Часто задаваемые вопросы

Этот инструмент тени бесплатный и конфиденциальный?

Да. Он полностью бесплатный и работает целиком в вашем браузере с помощью HTML5 canvas, поэтому изображение никогда не загружается на сервер и остаётся на вашем устройстве. Скачанное изображение без водяного знака, регистрация не нужна.

Тень повторяет форму прозрачного PNG?

Да. Тень строится по альфа-каналу изображения, поэтому вырезанный товар, логотип или стикер отбрасывает тень по собственному контуру, а не по прямоугольнику. Если это обычное непрозрачное фото, силуэтом служит прямоугольник снимка, при желании со скруглёнными углами.

Как сохранить прозрачный фон?

Установите фон «Прозрачный» и скачайте PNG. Рисуются только тень и объект, поэтому результат можно позже наложить на любой цвет. JPG не хранит прозрачность, поэтому при экспорте в JPG фон заливается белым.

Чем размытие отличается от расширения?

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

Почему тень обрезается по краю изображения?

Тени нужно место за пределами картинки. Инструмент автоматически добавляет отступ по смещению, размытию и расширению, а ползунок «Дополнительный отступ» позволяет добавить ещё. Если экспортировать JPG на цветном фоне, именно на этот отступ и ложится тень.

Можно ли получить CSS для той же тени?

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

Дополнительные материалы

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Альфа-композитинг — Википедия