Практическое руководство по CSS box-shadow

Что такое CSS box-shadow?

box-shadow — это CSS-свойство, которое добавляет тень к элементам (блокам, изображениям, кнопкам). Оно позволяет создавать реалистичные или стилизованные эффекты глубины, выделять элементы и имитировать рамки.

Коротко: тень — это визуальный эффект, который отделяет элемент от фона.

Синтаксис

box-shadow: [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [необязательный радиус распространения] [цвет];

Краткое пояснение параметров:

• Горизонтальное смещение: положительное — вправо, отрицательное — влево.
• Вертикальное смещение: положительное — вниз, отрицательное — вверх.
• Радиус размытия: чем больше — тем мягче и расплывчатее тень.
• Радиус распространения: положительное значение увеличивает размер тени, отрицательное — уменьшает.
• Цвет: любой формат (rgba, hex, hsla). alfa‑канал удобен для полупрозрачных теней.

Важно: параметры blur и spread опциональны. Несколько теней можно перечислять через запятую.

Быстрые практические примеры (1–9)

Ниже — те же примеры, что и в исходной статье. Каждый блок содержит код и изображение результата.

1. Слабая тень слева, справа и снизу

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Вывод:

2. Слабая тень со всех сторон

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Вывод:

3. Тонкая тень снизу и справа

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Вывод:

4. Тёмная тень со всех сторон

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Вывод:

5. Несколько слоёв тени (spread)

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Вывод:

6. Тонкая теневaя рамка и inset

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Вывод:

7. Тень снизу и слева

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Вывод:

8. Светлая тень сверху/слева и тёмная снизу/справа

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Вывод:

9. Тонкая цветная рамка (цветная тень)

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Вывод:

Полезные приёмы и подсказки

Памятка: быстрое руководство (cheat sheet)

• Мягкая тень: blur 10–30px, alpha 0.1–0.3.
• Акцентная тень: blur 4–12px, alpha 0.2–0.5.
• Рамка через shadow: spread > 0 и blur 0.
• Внутренняя тень: добавьте inset.
• Несколько теней: разделяйте запятыми в порядке от верхнего слоя к нижнему.

Мини‑методология: как подобрать тень для карточки

1. Начните с малого: rgba(0,0,0,0.08) 0 4px 8px.
2. Увеличьте blur для более мягкого эффекта.
3. Добавьте spread для видимой рамки.
4. Проверьте на светлом и тёмном фоне.
5. Тестируйте в 100% и 200% масштабе (DPI).

Когда box-shadow не подходит (контрпример)

• Когда нужна настоящая физическая глубина (используйте 3D‑рендер или SVG с освещением).
• Когда нужно влиять на поток документа: тень не меняет размер элемента и не может заменить отступы или рамки с точки зрения layout.
• При анимации большого количества элементов с heavy box-shadow может падать FPS на слабых устройствах.

Альтернативные подходы

• Используйте фильтр filter: drop-shadow(…) для прозрачных PNG и сложных форм.
• Для контуров/рамок применяйте outline или border вместо spread, если нужен реальный размер рамки.
• SVG фильтры позволяют сложные и оптимизированные тени для векторной графики.

Эвристики и правила проектирования

• Правило «малых слоёв»: комбинируйте 2–3 слоя теней вместо одной громоздкой.
• Контраст и читаемость важнее эффекта: если тень ухудшает чтение, уменьшите opacity.
• Для мобильных интерфейсов используйте более мягкие и менее «тяжёлые» тени.

Доступность и производительность

• Не используйте тени как единственный индикатор интерактивности. Добавьте также изменение цвета, рамку или фокусное состояние.
• box-shadow не влияет на доступность самого элемента, но может ухудшать видимость текста. Проверьте контраст.
• Производительность: тяжёлые множественные теневые слои и большое blur могут нагрузить GPU и CPU. Оптимизируйте, если анимируете.

Совместимость и миграция

box-shadow поддерживается всеми современными браузерами. Для старых браузеров можно предусмотреть graceful fallback: использовать тонкую границу (border) или filter: drop-shadow() для SVG.

Ролевые чек‑листы

• Дизайнер:
  • Подобрать 1–2 базовых стиля теней.
  • Проверить на светлом и тёмном фоне.
• Разработчик:
  • Вынести параметры тени в переменные CSS (например, –shadow-sm, –shadow-md).
  • Добавить fallbacks для старых браузеров.
• QA:
  • Проверить тени на разных разрешениях и при масштабировании.
  • Проверить доступность: контраст, читабельность.

Критерии приёмки

• Тень соответствует дизайнерскому гайдлайну (см. tokens).
• При масштабировании элементы не «прыгают» и не теряют читабельность.
• Фокусные состояния содержат явный контур или другой визуальный индикатор помимо тени.
• Производительность: при прокрутке UI не теряет 30+ FPS на целевых устройствах.

Быстрые сниппеты (cheat‑snippets)

• Inset внутренняя тень:

box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);

• Множественные уровни:

box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08);

• Цветная рамка через shadow:

box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.15);

Короткий глоссарий

• blur: размытие тени.
• spread: расширение области тени.
• inset: внутреняя тень, направленная внутрь элемента.
• drop-shadow: похожий эффект через filter.

Итог

box-shadow — гибкий инструмент для создания глубины и акцентов на интерфейсах. Начните с лёгких значений, комбинируйте слои и всегда тестируйте на доступность и производительность.

Ключевые советы: используйте rgba для контроля прозрачности, комбинируйте 2–3 слоя, не полагайтесь на тень как на единственный индикатор.

Краткое резюме:

• box-shadow прост в использовании и мощный при правильном подборе параметров.
• Множественные тени через запятую дают богатые визуальные эффекты.
• Проверяйте контраст и производительность на целевых устройствах.