Создать аккаунт
Интерфейсы и CSSРаботает в браузере

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

Соберите аккуратную тень карточки или панели из явных числовых параметров без сторонних библиотек и скрытых CSS side effects.

  • Offset/blur/spread
  • HEX + opacity
  • Copyable CSS
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

.shadow-card {
  box-shadow: 0px 18px 48px 0px rgba(15, 23, 42, 0.18);
}

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Укажите X/Y offset, blur и spread.

  2. 2

    Выберите HEX-цвет и opacity от 0 до 1.

  3. 3

    Проверьте preview и скопируйте declaration.

02

Что умеет инструмент

  • Отрицательные X/Y offsets в bounded диапазоне.
  • Blur до 400 px и spread от -200 до 200 px.
  • HEX to rgba conversion для контролируемой прозрачности.
03

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

  • Подбор shadow token для карточек и dropdown.
  • Смягчение border-heavy интерфейса через elevation.
  • Быстрая проверка тени перед переносом в CSS variables.
04

Что происходит внутри

Цвет выводится как rgba после безопасного HEX parsing.

Все числовые параметры ограничены, чтобы исключить случайные огромные CSS values.

05

Вопросы и ответы

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

Нет. Текущая версия генерирует одну тень для предсказуемого token workflow.

Почему цвет вводится в HEX?

HEX удобно валидировать, а opacity затем добавляется отдельно в rgba output.