Как пользоваться: Генератор box-shadow
- Выберите Box shadow или Text shadow, затем начните с пресета, например Layered (realistic) или Neumorphism.
- Выберите слой и настройте смещение по X/Y, размытие, spread, цвет, непрозрачность и inset с помощью ползунков или полей ввода.
- Добавляйте, дублируйте или удаляйте слои: несколько мягких теней дают самую естественную глубину.
- Измените фон предпросмотра, цвет карточки и радиус под свой дизайн, затем нажмите Копировать CSS.
Что такое свойство CSS box-shadow?
box-shadow рисует одну или несколько теней вокруг (или внутри) границ элемента. Каждая тень записывается как [inset] <x> <y> [blur] [spread] <color>, а несколько теней разделяются запятыми. Первая тень отрисовывается поверх остальных. Тени следуют за border-radius, не влияют на вёрстку и не вызывают появления полос прокрутки.
| Значение | Что делает |
|---|---|
| Смещение по X / Y | Сдвигает тень вправо/вниз (отрицательные значения сдвигают влево/вверх). |
| Blur (размытие) | Смягчает края; 0 даёт резкую тень. Не может быть отрицательным. |
| Spread | Увеличивает (положительное значение) или уменьшает (отрицательное) тень до размытия. |
| Color (цвет) | Обычно тёмный цвет с низкой непрозрачностью, например rgba(15, 23, 42, 0.08). |
| inset | Рисует тень внутри блока: для нажатых кнопок и углублений. |
Реалистичные многослойные тени
Реальные предметы отбрасывают резкую контактную тень и широкую мягкую фоновую. Одна большая тень выглядит плоско, а несколько слоёв с удваивающимся смещением и размытием (1px, 2px, 4px, 8px, 16px…) и низкой непрозрачностью выглядят естественно. Попробуйте пресет Layered. Отрицательный spread у большого размытого слоя (Elevated card) удерживает тень под карточкой, не давая ей вылезать по бокам. Чтобы результат выглядел чище, окрашивайте тень в оттенок фона, а не в чистый чёрный.
Неоморфизм, свечение и фокус-кольца
Неоморфизм сочетает светлую тень (сверху слева) и тёмную (снизу справа) на элементе того же цвета, что и фон. Выглядит он мягко, но контраст очень низкий, поэтому не полагайтесь только на него, чтобы показывать кнопки или их состояние. Тень с нулевым размытием и положительным spread отлично подходит как фокус-кольцо, которое повторяет border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow использует тот же синтаксис, но без spread и inset. Применяйте его аккуратно, чтобы улучшить читаемость текста на изображениях, или накладывайте слои для неонового, контурного и ретро-3D эффекта (см. пресеты Text shadow). Основной текст лучше держать без теней: они снижают чёткость.
Производительность и советы для Webflow
Большие размытые тени дешёвы в отображении, но дороги в анимации. Вместо того чтобы анимировать box-shadow при наведении, поместите тень для hover на псевдоэлемент ::after и плавно меняйте его opacity. В Webflow добавляйте каждый слой на панели стилей в разделе Effects → Box shadows (выберите Outside или Inside). Таблица под CSS-выводом показывает значения каждого слоя; spread подписан как Size, как и в Webflow. Сочетайте тени с фоном из CSS Gradient Generator.
Также ищут как: css box-shadow, генератор теней css, text-shadow генератор, css тень, неоморфизм css, многослойная тень css, inset тень css, drop shadow css.
Инструменты, которые хорошо сочетаются с Генератор box-shadow
- Генератор CSS-кнопок — Создайте кнопку, которая хорошо выглядит в каждом состоянии.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
Часто задаваемые вопросы
В чём разница между blur и spread в box-shadow?
Как добавить тень только с одной стороны?
0 8px 6px -6px rgba(0,0,0,.3) даёт тень только снизу.Что лучше: box-shadow или filter: drop-shadow()?
box-shadow повторяет прямоугольник элемента и его радиус и поддерживает spread и inset. filter: drop-shadow() повторяет реальную видимую форму, включая прозрачные PNG и SVG, но не имеет spread и inset и может быть тяжелее для отрисовки.