Как пользоваться
- Задайте положение тени в полях «Смещение по горизонтали» и «Смещение по вертикали».
- Настройте «Размытие» и «Растяжение», ориентируясь на предпросмотр.
- Выберите «Цвет» и задайте «Непрозрачность».
- Для тени внутри блока включите «Внутренняя (inset)».
- Для составной тени нажмите «+ Добавить слой» и настройте новый слой.
Примеры
Мягкая тень для карточки товара
Смещение: 0 и 8 px; размытие: 24 px; растяжение: 0; цвет: #2451E8; непрозрачность: 0,35.
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Два слоя для карточки статьи
Первый слой: 0, 2, 4, −2 px; второй: 0, 4, 6, −1 px. Оба слоя: #000000, непрозрачность 0,1.
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Внутренняя тень для поля ввода
Внутренняя тень: смещение 0 и 2 px; размытие 4 px; растяжение 0; цвет #000000; непрозрачность 0,2.
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
Советы
- Подберите цвет тени в инструменте «Коды цветов HTML».
- Добавьте градиентный фон с помощью генератора CSS-градиентов.
Частые вопросы
Сколько теней можно задать одному блоку?
Можно использовать от одного до четырёх слоёв. Первый слой рисуется поверх остальных; меняйте порядок кнопками «↑ Выше» и «↓ Ниже».
Почему после ввода значения тень не меняется?
Если поле содержит ошибку, предпросмотр и CSS сохраняют последнюю корректную тень. Исправьте значение по подсказке под полем; ошибка в другом слое отмечается на его вкладке.
Можно ли указать размеры в rem или дробных пикселях?
Поддерживаются только целые пиксели: смещения и растяжение от −200 до 200, размытие от 0 до 300. Значения в rem, em и дробных пикселях не принимаются.
Попадут ли фон и скругление блока в CSS?
Поля «Цвет блока», «Фон» и «Скругление» меняют только образец. В готовый CSS входит только box-shadow.
Как скопировать готовый box-shadow?
Нажмите «Копировать CSS» — в буфер попадёт полное объявление box-shadow с точкой с запятой, а при нескольких слоях каждый слой будет на своей строке. Кнопка «Копировать значение» копирует только значение без «box-shadow:» и «;». Сочетание Ctrl+Shift+C (на Mac Cmd+Shift+C) тоже копирует CSS, если на странице не выделен текст.