Генератор CSS box-shadow

Свойство CSS `box-shadow` добавляет один или несколько теневых эффектов к HTML-элементу. Каждая тень задаётся до шести значений: необязательное ключевое слово `inset`, горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения и цвет. Положительное горизонтальное смещение сдвигает тень вправо; положительное вертикальное — вниз. Несколько теней разделяются запятыми и отрисовываются спереди назад. Это основной CSS-механизм для добавления визуальной глубины, иерархии подъёма, эффектов свечения и нейморфной стилистики к компонентам интерфейса без использования изображений.

Полный синтаксис: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Обязательны только `offset-x`, `offset-y` и `color`; `blur-radius` и `spread-radius` по умолчанию равны 0, `inset` по умолчанию — внешняя тень. Типичная тень карточки выглядит так: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Накладывайте неограниченное количество теней, разделяя их запятыми — они отрисовываются спереди назад (первая — поверх). Этот генератор выдаёт полное объявление вместе с именем свойства `box-shadow:` или только значение — по вашему выбору.

Blur-radius управляет мягкостью краёв: ноль даёт жёсткий чёткий контур, точно повторяющий форму элемента; большие значения создают постепенно размытое, рассеянное угасание. Spread-radius увеличивает или уменьшает всю тень до применения размытия: положительные значения расширяют её за границу элемента, отрицательные сжимают внутрь. Наиболее реалистичные тени используют умеренное размытие с немного отрицательным растяжением, удерживая тень близко к контуру элемента, а не расплываясь. Именно этот приём применяется в пресетах «Глубокий» и «Парящий».

Добавьте ключевое слово `inset` в начале объявления тени: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Тень inset рисуется внутри рамки элемента, а не позади него, создавая вдавленный или утопленный вид. Типичные случаи использования: поля ввода (для отображения глубины фокуса), дорожки переключателей, нажатые состояния кнопок и контейнеры с тиснёным текстом. В этом генераторе есть переключатель Inset в панели управления каждого слоя — включите его, и тень мгновенно перевернётся внутрь в предпросмотре.

Да — CSS допускает любое количество теней через запятую на одном элементе. Они отрисовываются в порядке перечисления, первая — поверх. Наложение нескольких слоёв — ключевой приём для создания плавной, реалистичной глубины: одна большая тень выглядит искусственно, тогда как три-пять градуированных слоёв имитируют физическое рассеивание света. Этот генератор поддерживает до восьми независимых слоёв, каждый со своими смещением, размытием, растяжением, цветом, прозрачностью и переключателем Inset. Иконка глаза позволяет показывать/скрывать отдельные слои для быстрого сравнения до/после без их удаления.

Нейморфизм использует две противоположные тени на элементе, фон которого совпадает с фоном страницы: одна светлая (близкая к белой) тень направлена влево-вверх, другая тёмная (чёрная с низкой прозрачностью) — вправо-вниз. Это создаёт эффект выдавливания элемента из фоновой поверхности. Классический нейморфный код: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. Фон элемента должен точно совпадать с фоном страницы для работы иллюзии. Пресет «Нейморфный» в этом генераторе предоставляет готовую точку отсчёта — переключите фон предпросмотра на «Мягко-серый», чтобы увидеть его в контексте.

Используйте нулевое смещение, большой радиус размытия и цветное значение: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. Нулевое смещение равномерно распространяет свечение во все стороны. Положительное растяжение отодвигает свечение дальше от элемента. Сочетание двух слоёв — одного с меньшим размытием и большей прозрачностью для яркого ядра и другого с большим размытием и меньшей прозрачностью для рассеянного ореола — создаёт более убедительный светящийся эффект. Пресет «Синее свечение» демонстрирует этот двухслойный подход. Измените цвет на любой оттенок для акцента вашего бренда.

Вместо одной большой тени наложите три-пять слоёв, где каждый примерно удваивает смещение и размытие, вдвое уменьшая прозрачность: например, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Этот приём имитирует физическое рассеивание света от точечного источника и остаётся убедительным при любом масштабе или разрешении экрана. Пресеты «Глубокий» и «Парящий» в этом генераторе построены именно на этом принципе — три градуированных слоя, которые выглядят естественно в любом масштабе.

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

Нет. `box-shadow` — это чисто визуальный эффект, отрисовываемый вне обычного потока разметки. Он никогда не сдвигает соседние элементы, не увеличивает прокручиваемую область контента и не влияет на вычисленные ширину, высоту, отступы margin или padding элемента. Тени визуально выходят за границы блока, но игнорируются движком разметки. Это означает, что вы можете добавлять широкие тени к элементам в плотной сетке, не ломая разметку — хотя, возможно, потребуется добавить `overflow: visible` на родительский контейнер, чтобы тень не обрезалась.

После настройки тени генератор предлагает три формата вывода. <strong>Скопировать CSS</strong> даёт полное объявление свойства (`box-shadow: …;`) для любой таблицы стилей. <strong>Скопировать значение</strong> даёт только значение тени — удобно для SCSS-переменной, значения CSS custom property или записи в `extend.boxShadow` Tailwind. <strong>React-стиль</strong> выводит camelCase-формат (`boxShadow: '…'`) для inline-объектов стиля в JSX или Styled Components. Для Tailwind вставьте значение в `tailwind.config.js` в `theme.extend.boxShadow`, чтобы создать кастомный утилитарный класс тени.

Большинство специализированных инструментов для теней поддерживают генерацию только одного слоя — cssgenerator.org, например, предлагает базовые настройки без библиотеки пресетов и многослойного наложения. Справочник css-tricks.com — это документация, а не интерактивный инструмент. Генераторы CSS на cssmatic.com работают, но устарели и перегружены рекламой. Генератор UtiloKit поддерживает до восьми независимых слоёв с переключением видимости каждого, восемь отобранных пресетов для самых распространённых паттернов теней (карточка, чёткий, material, нейморфный, парящий, глубокий, свечение, вдавленный колодец), три формата вывода для разных фреймворков и полный переключатель тёмного/светлого фона для проверки контраста — всё без рекламы и без загрузки данных.

Да — генератор box-shadow полностью адаптивен. На iPhone и Android все ползунки оптимизированы для касания с подходящими по размеру маркерами перетаскивания. Элемент живого предпросмотра масштабируется под размер экрана мобильного устройства. Палитры используют системный выбор цвета на мобильных браузерах. Трёхколоночный макет для ПК перестраивается в чистый одноколоночный вертикальный макет на узких экранах. Все кнопки копирования используют Web Clipboard API, поддерживаемый Safari, Chrome и Firefox на iOS и Android. Скачивание приложений не требуется, аккаунт не нужен — откройте URL и сразу начинайте работать.