Генератор CSS box-shadow
Двигайте ползунки или выберите пресет — тень видна на живой карточке, а CSS box-shadow копируется одним кликом.
Пресеты
Слои
0px
8px
24px
-8px
#000000
15%
Как пользоваться
- На карточке уже есть мягкая тень — двигайте любой ползунок (смещение X/Y, размытие, растяжение), выберите цвет и непрозрачность или включите Inset для внутренней тени. Всё обновляется на лету, нажимать ничего не нужно.
- Нажмите на пресет (Мягкий подъём, Сильный подъём, Внутренняя, Неоновое свечение, Двойная, Неоморфизм), чтобы сразу загрузить готовый вид.
- Добавляйте слои кнопкой «+», чтобы складывать тени; каждый слой редактируется отдельно. Полное объявление box-shadow копируется одним кликом.
Пример
Пресет
Мягкий подъём
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Вставьте это в любой селектор, например .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. Пресет «Двойная» выдаёт две тени через запятую; «Неоморфизм» требует светлого фона, чтобы быть заметным.
Область применения, ограничения и частые вопросы
- Только box-shadow: без фильтра drop-shadow(), без text-shadow, а градиентных теней в CSS нет — они вне области применения.
- Цвет берётся из палитры плюс ползунок непрозрачности; вставленные CSS-строки цвета не разбираются, поэтому ошибиться при вводе негде.
- Неоморфизм зависит от светлой поверхности — на очень тёмном фоне эффект может быть незаметен. Это свойство стиля, а не ошибка.
- Ничего не сохраняется и не передаётся параметром в ссылке: после обновления вы снова видите пресет «Мягкий подъём» по умолчанию. Всё работает в браузере.
Похожие инструменты
Когда нужно пойти дальше с цветом или тенями.