Практическое руководство по CSS box-shadow
Важно: тени влияют на восприятие интерфейса и могут ухудшать читаемость при плохом контрасте. Используйте с осторожностью и тестируйте на разных фонах.
CSS — это язык для стилизации веб-страниц. Его используют, чтобы задать цвет фона, тип и цвет шрифта, тени, отступы и многие другие визуальные параметры. Свойство box-shadow даёт полный контроль над тенями элементов — коробок, картинок, карточек и т.д.
Коротко о терминах: box-shadow — свойство, которое рисует тень вокруг рамки элемента; blur — размытие тени; spread — растяжение (размах) тени.
Как работает box-shadow
Синтаксис box-shadow довольно прямолинеен:
box-shadow: [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [необязательный радиус растяжения] [цвет];- горизонтальное смещение: положительное смещение сдвигает тень вправо, отрицательное — влево;
- вертикальное смещение: положительное смещение сдвигает тень вниз, отрицательное — вверх;
- радиус размытия: чем больше значение, тем мягче и шире тень;
- радиус растяжения (spread): положительные значения увеличивают площадь тени, отрицательные — уменьшают;
- цвет: любой CSS-формат (rgba, hex, hsla и т.д.).
Параметры blur, spread и color являются необязательными. Самая полезная особенность — возможность перечислять несколько значений через запятую, что позволяет комбинировать тени и создавать сложные многоуровневые эффекты.
Быстрая шпаргалка по параметрам
- Используйте rgba для контроля непрозрачности тени (альфа-канал);
- Малые значения blur (1–6px) дают «жёсткие» тени — подходят для мелких элементов;
- Большие blur (20–60px) создают мягкие рассеянные тени, часто используемые для карточек;
- Spread положителен для эффекта обрамления, отрицателен — для сужения тени;
- Для внутренней тени добавьте ключевое слово inset.
Примеры (1–9)
Ниже — девять практических примеров. Каждый пример показывает готовый CSS и изображение результата.
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. Тонкая теневая рамка и внутренний бликовый инсет ``` 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. Тень снизу и слева с негативным spread
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;Результат:
`` ## Когда box-shadow не подходит - Когда нужен векторный эффект или сглаживаемая граница (используйте SVG-фильтры или outline); - Если тень должна повторяться в нескольких местах с разной формой — иногда удобнее использовать псевдоэлементы (::before/::after); - На слабых устройствах большое количество больших blur-значений может замедлять рендер и влиять на производительность; тестируйте. ## Альтернативы и дополнительные техники - filter: drop-shadow(…): работает как тень для визуального содержимого элемента (полезно для изображений и svg), применяется к полной визуальной форме, а не к прямоугольной рамке; - text-shadow: для теней текста; - Псевдоэлементы (::before/::after) с transform и blur для более сложных псевдо-теней и градиентов; - SVG-фильтры (feGaussianBlur, feOffset) для очень точного контроля и производительности в некоторых сценариях. ## Быстрая методология: как подобрать тень для компонента (мини-метод) 1. Определите роль элемента: акцент, плавающая карточка, кнопка или фон; 2. Выберите контраст: для ярких фонов тени должны быть тусклее (меньше alpha); 3. Начните с базового шаблона: small (0 1px 3px rgba(0,0,0,.12)), medium (0 4px 10px rgba(0,0,0,.15)), large (0 20px 40px rgba(0,0,0,.2)); 4. Подберите spread и blur и проверьте на нескольких разрешениях; 5. Сверьте с дизайнерским языком (elevations) и проведите визуальное тестирование. ## Шпаргалка: готовые пресеты - Маленькая карточка: box-shadow: rgba(0,0,0,0.08) 0px 1px 3px; - Кнопка при наведении: box-shadow: rgba(0,0,0,0.12) 0px 6px 12px; - Модальное окно: box-shadow: rgba(0,0,0,0.4) 0px 30px 60px; - Всплывающая подсказка: box-shadow: rgba(0,0,0,0.07) 0px 2px 6px; Используйте rgba, чтобы управлять визуальной тяжестью тени без изменения цвета. ## Контроль качества и тесты (критерии приёмки) - Тень должна оставаться читаемой на основных фоновых цветах продукта; - Проверить элементы при 100%, 125%, 150% масштабировании и на мобильных устройствах; - Убедиться, что тень не перекрывает важную информацию (например, паддинг/overflow родителя); - Замерить FPS при динамически анимируемых тенях — не опускаться ниже приемлемых значений. ## Чеклист по ролям - Дизайнер: - Указывает уровни elevation и примеры для компонентов; - Проверяет контраст и влияние на композицию. - Фронтенд-разработчик: - Внедряет пресеты в переменные CSS (custom properties) или дизайн-систему; - Тестирует поведение при изменении размера экрана. - Тестировщик: - Проверяет визуальные регрессы и перформанс при анимации; - Подтверждает корректность на основных браузерах. ## Совместимость и рекомендации по миграции - box-shadow поддерживается всеми современными браузерами. root-проблемы встречаются редко; - drop-shadow (в filter) имеет схожую поддержку, но ведёт себя иначе для прозрачных зон изображения; - Для критичных по производительности эффектов ограничьте количество одновременно отрисовываемых больших blur-ов; - При миграции из сложных SVG-фильтров на box-shadow — убедитесь, что форма тени остаётся приемлемой. ## Краткий словарь (1 строка) - box-shadow — CSS-свойство, рисующее тень вокруг рамки элемента; inset — ключевое слово для внутренней тени. ## Факты и эвристики - Эвристика для выбора blur: маленькие UI-элементы (1–6px), карточки (8–20px), модальные оверлеи (20–60px); - Используйте alpha в диапазоне 0.06–0.4 для большинства интерфейсных теней; меньше — почти незаметно, больше — грубо. ## Примеры тест-кейсов - Открыть страницу на светлом и тёмном фоне — тени должны выглядеть уместно; - Включить высокую плотность пикселей (retina) — тени не должны «пикселизироваться»; - Анимировать смещение и blur — проверить стабильность FPS. ## Риски и смягчение - Риск: большие blur-эффекты замедляют рендер. Смягчение: уменьшить количество больших теней, заменить на растровые эффекты или использовать CSS-псевдоэлементы; - Риск: тени ухудшают читаемость. Смягчение: скорректировать альфу и расстояние до текста. ## Итог box-shadow — гибкий инструмент для эстетики и иерархии интерфейса. Он прост в применении и позволяет создавать всё — от тонких рамок до глубоких многоуровневых теней. Выбирайте значения исходя из роли элемента, тестируйте на разных фонах и устройциях и храните пресеты в дизайн-системе. Краткое резюме: - Понимайте параметры: смещение, blur, spread, color; - Начинайте с пресетов и подбирайте под продукт; - Тестируйте производительность и читаемость.
Похожие материалы
RDP: полный гид по настройке и безопасности
Android как клавиатура и трекпад для Windows
Советы и приёмы для работы с PDF
Calibration в Lightroom Classic: как и когда использовать
Отключить Siri Suggestions на iPhone
