Русский
Проектируйте многослойный CSS box-shadow с живым превью и копируйте готовый CSS.
Последнее обновление
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow - это свойство CSS, которое добавляет теням элемент: падающие тени, свечение, внутренние вмятины. Это самый мощный рычаг, чтобы придать плоскому дизайну ощущение *приподнятости*: карточки отрываются от страницы, модальные окна парят, кнопки выглядят нажимаемыми.
Хитрость в том, что *хорошая* тень редко состоит из одного слоя. Реальные тени мягче и имеют рассеянное окружение - большинство дизайн-систем (Material, iOS, Tailwind) накладывают 2–3 объявления box-shadow с разными смещениями и прозрачностями. Писать это руками неудобно; генератор позволяет настраивать каждый слой визуально и сразу видеть совмещённый результат.
Генератор Coddy поддерживает неограниченное число слоёв, *внешние* и *inset*-тени, цвет и прозрачность для каждого слоя и пресеты под самые частые сценарии: лёгкие карточки, чёткие падающие тени, фирменное свечение, inset-вмятины и неоморфные поверхности. Копируйте CSS и вставляйте прямо в стили - без загрузки на сервер, без учётной записи, без водяных знаков.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset помещает тень *внутрь* элемента; без него она падает наружу.Выберите пресет, близкий по настроению: лёгкая карточка, мягкий подъём, чёткая тень, фирменное свечение, inset-вмятина или неоморфизм. Это хорошие стартовые точки для подгонки.
Двигайте слайдеры X/Y, blur, spread, цвета и прозрачности. Превью слева обновляется мгновенно. Меньшая прозрачность и больший blur читаются как более *мягкая* тень.
Кнопка *Добавить слой* стэкает вторую тень. Реальная глубина почти всегда строится на двух слоях: одна короткая и плотная (контактная) и одна длинная и мягкая (окружающая).
Переключение *Inset* отрисует тень внутри элемента. В сочетании с лёгкой внешней тенью это даёт эффект нажатой кнопки.
Когда превью совпадает с дизайном, нажмите *Скопировать CSS*. Сгенерированное правило включает все активные слои - вставляйте прямо в таблицу стилей.
Каждое значение в box-shadow: x y blur spread color и его роль.
| Значение | Эффект | Типичный диапазон |
|---|---|---|
| X offset | Сдвиг тени по горизонтали; положительный = вправо | −40…40px |
| Y offset | Сдвиг тени по вертикали; положительный = вниз | 0…40px для естественного света |
| Blur | Размывает край тени | 0…80px |
| Spread | Увеличивает или уменьшает до blur | −30…30px |
| Color | Любой цвет CSS; rgba() задаёт прозрачность послойно | rgba(0,0,0,0.05–0.3) для естественных теней |
inset | Тень рисуется внутри элемента | - |
| Несколько слоёв | Через запятую; накладываются сзади вперёд | 2–3 слоя дают реалистичную глубину |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Короткая и плотная тень обозначает точку контакта, более длинная и мягкая даёт ощущение рассеянного света. Этот приём использует большинство современных дизайн-систем.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);X и Y по нулям, чтобы свечение распределялось равномерно. Небольшой положительный spread утолщает свечение до того, как blur его смягчит. Используйте дозированно - цветные glow сильно отвлекают внимание.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Inset-тень рисуется внутри. Мягкая создаёт ощущение углубления; inset в 1px добавляет тонкую внутреннюю обводку для чёткости.
box-shadow?box-shadow: x y blur spread color. Первые два - смещения; *blur* размывает край; *spread* меняет размер до размытия; цвет - любой CSS-цвет (используйте rgba() для прозрачности). inset в начале делает тень внутренней.box-shadow и filter: drop-shadow()?box-shadow идёт по прямоугольнику элемента и быстро рисуется. drop-shadow() следует за альфа-каналом (хорошо для SVG и прозрачных PNG) и стоит дороже. Для карточек и кнопок - box-shadow; для нерегулярных форм - drop-shadow().transform: scale() где-нибудь выше по дереву.box-shadow на макет?overflow: visible.