CSS box-shadow

Генератор CSS box-shadow с live preview, пресетами, настройкой смещения, размытия, spread, цвета, прозрачности и inset-тени.

Обработка выполняется локально в браузере. Данные не отправляются на сервер.

CSS box-shadow — бесплатный онлайн-инструмент. Генератор CSS box-shadow с live preview, пресетами, настройкой смещения, размытия, spread, цвета, прозрачности и inset-тени. Обработка выполняется локально в браузере. Данные не отправляются на сервер.

Что делает

На выходе

Обработка

Продолжить работу

Выберите связанный инструмент для следующего шага.

Данные для перехода между инструментами хранятся только в памяти текущей сессии браузера.

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

Настройте смещение X и Y, размытие, spread, цвет и прозрачность тени.
Проверьте результат на live preview карточки.
При необходимости выберите пресет: карточка, кнопка, модальное окно, inset или neumorphism.
Скопируйте готовое CSS-правило box-shadow, CSS variable или Tailwind-класс.
Вставьте код в свой CSS, компонент или дизайн-систему.

Подробнее

Инструмент “CSS box-shadow” помогает быстро собрать CSS-тень для карточек, кнопок, модальных окон, панелей и других UI-элементов. Можно настроить смещение по X и Y, размытие, spread, цвет, прозрачность, inset-режим и несколько слоёв тени. Live preview показывает результат сразу, а готовый код можно скопировать как CSS-правило, значение box-shadow, CSS variable, inline style или Tailwind arbitrary class. Генерация выполняется локально в браузере: данные не отправляются на сервер UtiLab.

Работает в браузере
Данные не отправляются на сервер
Live preview тени
Настройка offset, blur, spread и цвета
Поддерживает inset box-shadow
Есть пресеты для карточек, кнопок и модальных окон
Можно скопировать CSS, variable или Tailwind-класс
Не требует регистрации

Частые вопросы

Как создать CSS box-shadow?

Настройте смещение X и Y, размытие, spread, цвет и прозрачность. Инструмент сразу покажет preview и сформирует готовое CSS-правило.

Что делает offset X и offset Y?

Offset X смещает тень по горизонтали, а offset Y — по вертикали. Положительные значения двигают тень вправо и вниз, отрицательные — влево и вверх.

Что такое blur в box-shadow?

Blur отвечает за размытие тени. Чем больше значение, тем мягче и шире выглядит тень.

Что такое spread?

Spread расширяет или сжимает область тени. Положительное значение делает тень больше, отрицательное — меньше.

Что значит inset?

Inset делает тень внутренней: она отображается внутри элемента, а не снаружи.

Можно ли сделать несколько теней?

Да. CSS box-shadow поддерживает несколько слоёв через запятую. Это полезно для мягких карточек, Material-like теней и neumorphism-эффектов.

Можно ли скопировать Tailwind-класс?

Да. Инструмент может сформировать Tailwind arbitrary class вида shadow-[...] для использования в Tailwind CSS.

Данные отправляются на сервер?

Нет. Настройки и результат генерируются локально в браузере и не отправляются на сервер UtiLab.

Чем box-shadow отличается от filter drop-shadow?

box-shadow рисует тень вокруг прямоугольного CSS-блока. filter: drop-shadow() учитывает форму прозрачного изображения или SVG, но используется в других сценариях.

Нужна ли регистрация?

Нет. Инструмент работает сразу и не требует регистрации.

Продолжить работу

Выберите связанный инструмент для следующего шага.

Данные для перехода между инструментами хранятся только в памяти текущей сессии браузера.

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

Настройте смещение X и Y, размытие, spread, цвет и прозрачность тени.

Проверьте результат на live preview карточки.

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

Скопируйте готовое CSS-правило box-shadow, CSS variable или Tailwind-класс.

Вставьте код в свой CSS, компонент или дизайн-систему.

Подробнее

Работает в браузере
Данные не отправляются на сервер
Live preview тени
Настройка offset, blur, spread и цвета
Поддерживает inset box-shadow
Есть пресеты для карточек, кнопок и модальных окон
Можно скопировать CSS, variable или Tailwind-класс
Не требует регистрации

Частые вопросы

Как создать CSS box-shadow?

Что делает offset X и offset Y?

Что такое blur в box-shadow?

Blur отвечает за размытие тени. Чем больше значение, тем мягче и шире выглядит тень.

Что такое spread?

Spread расширяет или сжимает область тени. Положительное значение делает тень больше, отрицательное — меньше.

Что значит inset?

Inset делает тень внутренней: она отображается внутри элемента, а не снаружи.

Можно ли сделать несколько теней?

Можно ли скопировать Tailwind-класс?

Да. Инструмент может сформировать Tailwind arbitrary class вида shadow-[...] для использования в Tailwind CSS.

Данные отправляются на сервер?

Нет. Настройки и результат генерируются локально в браузере и не отправляются на сервер UtiLab.

Чем box-shadow отличается от filter drop-shadow?

Нужна ли регистрация?

Нет. Инструмент работает сразу и не требует регистрации.