Бесплатный онлайн-инструмент
Генератор CSS box-shadow
Настройте тень блока ползунками и скопируйте готовый CSS. Живое превью, пресеты, внешняя или внутренняя (inset) тень, любой цвет и прозрачность.
Готовые рецепты теней
| Эффект | Код |
|---|---|
| Карточка (Material) | 0 2px 8px rgba(0,0,0,0.15) |
| Парящая карточка | 0 12px 30px rgba(0,0,0,0.25) |
| Мягкое свечение | 0 0 40px rgba(112,72,232,0.4) |
| Вдавленное поле | inset 0 2px 6px rgba(0,0,0,0.2) |
| Резкая (неоморфизм) | 8px 8px 16px rgba(0,0,0,0.2) |
Совет: настоящие тени мягкие и полупрозрачные — большое размытие и прозрачность 10–25%. Скругление углов для той же карточки настраивается в генераторе border-radius.
Частые вопросы
Что означают параметры box-shadow?
По порядку: смещение по X (вправо), смещение по Y (вниз), размытие (blur), растяжение (spread) и цвет. Отрицательные X/Y смещают тень влево/вверх, отрицательный spread сжимает тень меньше блока.
Что делает inset?
Ключевое слово inset рисует тень внутри элемента, а не снаружи — так делают эффекты «вдавленности», внутренние подсветки полей и имитацию рамок.
Как сделать тень естественной?
Реальные тени мягкие и полупрозрачные: большое размытие, небольшое смещение вниз и чёрный с прозрачностью 10–25% (rgba(0,0,0,0.15)). Резкие чёрные тени со 100% непрозрачностью выглядят искусственно.
Как понять, где падает тень и как она будет видна на сайте?
Превью показывает белую карточку на нейтральном светлом фоне — так тень выглядит на большинстве сайтов. Переключателем «Фон превью» можно поставить тёмный фон или шахматку: цвет тени по умолчанию сам станет контрастным фону (тёмный на светлом, светлый на тёмном), чтобы её всегда было видно. Как только вы выбираете цвет вручную, инструмент его больше не меняет.
Влияет ли box-shadow на производительность?
Статичная тень — нет. Анимация box-shadow заставляет браузер перерисовывать тень каждый кадр — для hover-эффектов быстрее анимировать opacity псевдоэлемента с готовой тенью.