Генератор CSS-теней (box-shadow)

Что делает инструмент

Генератор теней позволяет настроить CSS-тень на глаз и скопировать готовое объявление box-shadow. Накладывайте сколько угодно слоёв, задавайте каждому смещение, размытие, растяжение, цвет и непрозрачность, переключайте его во внутреннюю тень — просмотр обновляется мгновенно. Можно также вставить готовое значение box-shadow и править его визуально. Всё работает в вашем браузере.

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

1. Начните с шаблона или оставьте пример.
2. Выберите слой кнопками Слой или нажмите + Добавить слой, чтобы наложить ещё один.
3. Двигайте Смещение по горизонтали, Смещение по вертикали, Размытие и Растяжение, выберите Цвет и уменьшите Непрозрачность для мягкости. Включите Внутренняя, чтобы получить тень внутрь.
4. Подберите Цвет блока, Фон и Радиус углов просмотра под свою страницу. Они влияют только на просмотр.
5. Скопируйте код из карточки CSS.

Поле CSS тени внизу можно редактировать: вставьте тень из таблицы стилей или дизайн-инструмента, и элементы управления её подхватят. Длины в rem и em пересчитываются в px из расчёта 16px.

Пример

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

Советы для естественных теней

• Низкая непрозрачность. Чёрный на 5–25 % выглядит реалистично; плотные тёмные тени кажутся тяжёлыми.
• Отрицательное растяжение не даёт большому размытию вылезать по бокам — это приём большинства теней «карточек».
• Подкрасьте тень. Тень с оттенком фона или фирменного цвета богаче чистого серого.
• Свет с одной стороны. Держите вертикальное смещение положительным во всех слоях, чтобы тени согласовались по направлению света.
• Производительность. Большие размытия на множестве элементов замедляют прокрутку на слабых телефонах; анимируйте opacity или transform, а не саму тень.