CSS · оформление

Свойство box-shadow

box-shadow рисует тень вокруг рамки элемента. Хорошая тень подчёркивает уровень интерфейса, а не превращает каждую карточку в тяжёлое пятно.

Синтаксис тени

Параметры идут в порядке: смещение по X, смещение по Y, размытие, растяжение и цвет. Чем больше размытие, тем мягче край.

.card {
  box-shadow: 0 12px 30px -8px rgb(15 23 42 / .18);
}

Внутренняя тень

Ключевое слово inset переносит тень внутрь. Оно подходит утопленным полям и тонкому внутреннему контуру, но требует осторожности.

.field {
  box-shadow: inset 0 1px 2px rgb(15 23 42 / .12);
}

Несколько слоёв

Тени перечисляются через запятую. Один слой может дать мягкий объём, второй — тонкую границу без изменения размеров блока.

.panel {
  box-shadow:
    0 18px 40px rgb(15 23 42 / .12),
    0 0 0 1px rgb(15 23 42 / .06);
}

Частые ошибки

• Чёрная непрозрачная тень.
• Одинаково сильная тень у всех элементов.
• Тень вместо видимого фокуса.
• Слишком большое размытие на десятках карточек.

Связанные темы

border-radius · transition