Tools
Считается локально

Тень блока

Настройте тень и скопируйте свойство.

box-shadow: 8px 12px 24px 0px #00000055;

Экспорт и импорт доступны после входа в аккаунт. Войти

Смещение, размытие, растяжение, цвет и inset обновляют образец.

Об инструменте

Добавьте карточкам, кнопкам и модальным окнам мягкую тень. Пример показывает тень на настоящем элементе, а одно нажатие копирует объявление box-shadow.

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

  1. 01

    Посмотрите на тень у примера карточки.

  2. 02

    Скопируйте CSS box-shadow.

  3. 03

    Вставьте его в стили и при необходимости поправьте значения.

FAQ

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

Что означают значения box-shadow?

Смещение по горизонтали и вертикали, радиус размытия, растяжение и цвет, а также inset для внутренней тени.

Тени тормозят страницу?

Статичные тени дешёвые. Анимация больших размытых теней может тормозить; лучше анимировать прозрачность псевдоэлемента.