Соберите тень слой за слоем
Этот генератор теней пишет за вас CSS-свойство <code>box-shadow</code>. Добавляйте сколько угодно слоёв тени, настраивайте для каждого горизонтальное и вертикальное смещение, размытие, растяжение, цвет и непрозрачность, делайте тень внутренней (inset) и смотрите, как меняется превью на любом фоне. Начните с пресетов: мягкие тени, уровни в стиле Material, неоморфизм, жёсткие смещения и свечение, затем скопируйте CSS или класс Tailwind <code>shadow-[…]</code>. Вставьте существующую тень, чтобы отредактировать её. Всё работает в вашем браузере.
Как создать тень CSS box-shadow
- 1Выберите пресет, близкий к нужному, или оставьте многослойную тень по умолчанию.
- 2Выберите слой и задайте смещение X и Y, размытие, растяжение, цвет и непрозрачность. Включите Inset, чтобы тень рисовалась внутри блока.
- 3Используйте Добавить слой, дублируйте, меняйте порядок и скрывайте слои, чтобы сочетать несколько теней.
- 4Измените фон превью, цвет блока, скругление углов и размер под свой дизайн.
- 5Скопируйте CSS или класс Tailwind.
Значения box-shadow простыми словами
- Смещение X и Y
- Насколько тень сдвинута вправо и вниз. Отрицательные значения сдвигают её влево и вверх. Источник света над страницей означает положительное смещение по Y.
- Радиус размытия
- Насколько мягкий край. 0 даёт чёткую копию блока; большие значения распределяют тень по более широкой и бледной области. Отрицательным быть не может.
- Радиус растяжения
- Увеличивает или уменьшает тень до размытия. Отрицательное растяжение при большом размытии не даёт мягкой тени выглядывать по бокам — на этом приёме построено большинство «мягких» теней.
- Цвет
- Обычно чёрный или тёмный оттенок фона с низкой непрозрачностью. Тень с оттенком фона выглядит естественнее чистого серого.
- inset
- Рисует тень внутри границы, а не снаружи, и блок выглядит вдавленным. Внутренние и внешние тени можно смешивать в одном объявлении.
Зачем накладывать несколько теней?
У настоящей тени есть тёмное плотное ядро там, где предмет почти касается поверхности, и мягкая широкая полутень дальше. Один слой box-shadow может нарисовать только что-то одно. Два–пять слоёв с удваивающимися смещениями и размытиями, каждый с низкой непрозрачностью, дают плавную реалистичную глубину, как в современных дизайн-системах. Пресет Плавная многослойная устроен именно так.
Слои рисуются спереди назад: первый в списке находится сверху. Меняйте порядок кнопками со стрелками и скрывайте слой значком глаза, чтобы увидеть его вклад. Скрытые слои не попадают в копируемый CSS.
Уровни Material, неоморфизм и другие стили
Пресеты Уровень 1–5 повторяют классические тени карточек Material Design: каждый уровень сочетает рассеянную и основную тень, поднимая карточку всё выше над страницей.
Неоморфизм использует две тени на блоке того же цвета, что и фон: тёмную со смещением вниз и вправо и светлую со смещением вверх и влево. Он работает только при совпадении цветов блока и фона, поэтому пресет задаёт оба. Жёсткое смещение полностью убирает размытие ради плоского бруталистского вида, а Свечение использует нулевое смещение и цветную тень для колец фокуса и неоновых эффектов на тёмном фоне.
Тени в Tailwind CSS
Встроенные в Tailwind классы от shadow-sm до shadow-2xl покрывают типичные случаи. Для всего остального генератор пишет произвольное значение вроде shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: пробелы заменяются подчёркиваниями, потому что в именах классов не может быть пробелов, а класс работает в Tailwind 3 и 4 без правки конфига.
Подберите к тени фон в генераторе CSS-градиентов или проверьте читаемость текста на карточке с помощью проверки контраста.
Тени и производительность
Большие радиусы размытия во всех современных браузерах рисует GPU, и на статичных элементах это дёшево. Но анимация box-shadow перерисовывает элемент в каждом кадре; чтобы анимировать глубину при наведении, поместите большую тень на псевдоэлемент и анимируйте его opacity.
Часто задаваемые вопросы
- Какой синтаксис у box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. Обязательны только два смещения. Несколько теней разделяются запятыми, например box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Как сделать мягкую, едва заметную тень?
- Используйте чёрный с низкой непрозрачностью (10–20%), большое размытие, небольшое смещение по Y и отрицательное растяжение, например 0 10px 30px -5px rgba(0,0,0,0.15). Две-три такие тени поверх друг друга выглядят ещё плавнее.
- Как сделать тень только с одной стороны?
- Сместите тень в нужную сторону и задайте отрицательное растяжение примерно равное размытию, чтобы она не была видна с других сторон, например 0 8px 6px -6px rgba(0,0,0,0.3) для тени только снизу.
- Что делает inset?
- inset рисует тень внутри блока, а не за ним, и элемент выглядит вдавленным в страницу. Это часто используют для полей ввода и нажатых кнопок.
- Чем box-shadow отличается от drop-shadow?
- box-shadow повторяет рамку элемента и скругление углов. Функция filter: drop-shadow() следует за реально видимыми пикселями, например контуром прозрачного PNG или SVG-иконки, но у неё нет растяжения и inset.
- Как использовать свою тень в Tailwind?
- Скопируйте класс Tailwind из генератора — произвольное значение вроде shadow-[0_4px_12px_rgba(0,0,0,0.15)] — и добавьте его к элементу. Можно также вынести CSS-значение в настройки boxShadow темы и дать ему имя.
- Можно ли отредактировать уже готовую тень?
- Да. Вставьте значение box-shadow, полное объявление или класс Tailwind shadow-[…] в поле «Импорт». Длины в rem и em пересчитываются из расчёта 16px.
- Мой CSS куда-то отправляется?
- Нет. Генератор полностью работает в вашем браузере.