Служба поддержки

Отвечаем по вопросам инструментов и оплат

🔲

Box Shadow генератор

Создайте CSS box-shadow визуально

Генератор CSS box-shadow — визуальный редактор теней для блоков

Инструмент создаёт CSS box-shadow визуально: настраиваете смещение по X и Y, размытие (blur), разброс (spread), цвет и прозрачность — и получаете готовый CSS для копирования. Поддерживаются множественные тени (несколько box-shadow через запятую), внутренние тени (inset), эффекты неоморфизма (neumorphism) и Material Design elevation.

Генератор теней полезен верстальщикам для оформления кнопок, карточек товаров, модальных окон, выпадающих меню. Код совместим с Tailwind (`shadow-*` утилиты или arbitrary `shadow-[...]`), Bootstrap (`.shadow-sm`, `.shadow-lg`), CSS-переменными дизайн-системы. Работает во всех браузерах — Chrome, Firefox, Safari, Edge.

Дополнительно можно задать CSS-переменные для теней (`--shadow-md`), экспорт в Figma Tokens, автоматическую генерацию слоистых теней (layered shadows) для эффекта «мягкой» тени с несколькими радиусами размытия.

✓Множественные тени — Добавляйте до 10 теней через запятую — для эффектов «глубины» и неоновых свечений.
✓Inset / outset — Переключение внешней и внутренней тени — нужна для неоморфизма и «вдавленных» элементов.
✓Neumorphism и Material — Пресеты для мягких теней Tailwind, Material Design elevation 1–24, iOS-стиля.
✓CSS-переменные — Экспорт в `--shadow-sm`, `--shadow-md`, `--shadow-lg` для дизайн-системы.
✓Layered shadows — Автоматически генерирует 3–5 наложенных теней для реалистичной мягкой тени.

📋

Как пользоваться

1
Задайте offset-x и offset-y — смещение тени по горизонтали и вертикали.
2

Встройте на свой сайт

Бесплатный виджет с бэклинком на ваш сайт

⭐Рейтинг и отзывы

Загрузка…

Смещение X5px

Смещение Y5px

Размытие15px

Распространение0px

Непрозрачность25%

Цвет#000000

InsetВнутренняя тень

CSS

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);

Настройте blur (размытие) и spread (разброс) в пикселях.

Выберите цвет и прозрачность тени (обычно rgba с alpha 0.1–0.3).

При необходимости включите inset или добавьте дополнительные слои.

Скопируйте CSS, Tailwind-класс или CSS-переменную.

✨

Возможности

🚀

Множественные тени

Добавляйте до 10 теней через запятую — для эффектов «глубины» и неоновых свечений.

🔒

Inset / outset

Переключение внешней и внутренней тени — нужна для неоморфизма и «вдавленных» элементов.

⚡

Neumorphism и Material

Пресеты для мягких теней Tailwind, Material Design elevation 1–24, iOS-стиля.

🎯

CSS-переменные

Экспорт в `--shadow-sm`, `--shadow-md`, `--shadow-lg` для дизайн-системы.

💎

Layered shadows

Автоматически генерирует 3–5 наложенных теней для реалистичной мягкой тени.

🎯

Когда пригодится

▸Создать «приподнятую» кнопку для CTA на лендинге
▸Оформить карточку товара в интернет-магазине
▸Тень под модальным окном или dropdown-меню
▸Реалистичная тень для изображения (Material elevation)
▸Неоморфизм для настроек в SaaS-приложении
▸Неоновое свечение для тёмной темы
▸Inset-тень для поля ввода в форме

📦

Что поддерживается

box-shadow: x y blur spread color
Inset / outset
Множественные тени через запятую
Tailwind shadow-* / Bootstrap .shadow-*
CSS-переменные для дизайн-системы

💡

Полезные советы

💡

Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)

🎯

Все файлы обрабатываются локально в вашем браузере для максимальной безопасности

⚡

Сохраняйте результат сразу после обработки

🔑

Попробуйте разные настройки для оптимального результата

❓

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

Box-shadow рисует тень по bounding box элемента, поэтому для PNG с прозрачностью она выглядит как прямоугольник. Filter: drop-shadow учитывает альфа-канал и повторяет форму содержимого — нужен для SVG и PNG с прозрачным фоном.

Наложите 3–5 теней с разным blur и alpha: `0 1px 2px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.05), 0 16px 32px rgba(0,0,0,.05)`. Инструмент генерирует такие layered shadows автоматически.

Ключевое слово `inset` делает тень внутренней — внутри рамки элемента. Применяется для «вдавленных» кнопок, пресс-эффектов, неоморфизма и декора input-полей.

Spread (4-й параметр) растягивает тень равномерно во все стороны. Положительный — тень больше элемента, отрицательный — меньше (полезно для «фокусного» обрамления).

Большой blur (>40px) и множество теней создают нагрузку на GPU — особенно при анимации. Для hover-эффектов используйте `will-change: transform` и анимируйте трансформацию, а не саму тень.

🔎