Тени в CSS: полное руководство по box-shadow и text-shadow

Кратко

Важно: сначала продумайте доступность — сильные тени могут ухудшать контраст и читаемость текста.

CSS предоставляет множество способов улучшить внешний вид веб‑страниц; текстовые и теневые эффекты для блоков — отличные примеры. Они дают результат, похожий на тени в графических редакторах.

В этой статье подробно разберём синтаксис, поведение и практические приёмы использования CSS-теней, а также добавим рекомендации, тесты и чек‑листы для дизайнеров и разработчиков.

Почему важно понять тени в CSS

Тени помогают отделять слои интерфейса, добавляют глубину и направляют внимание пользователя. Неправильно подобранные тени могут выглядеть неестественно, утяжелять интерфейс или ухудшать читаемость. Поэтому важно знать, какие параметры доступны, как они взаимодействуют и какие есть альтернативы.

Факто-бокс

• Свойство box-shadow принимает до шести значений: offset-x offset-y blur spread color inset.
• Свойство text-shadow принимает до четырёх значений: offset-x offset-y blur-radius color.
• Блюр нельзя задавать отрицательным.

Как использовать box-shadow

Синтаксис одной тени выглядит так:

box-shadow: offset-x offset-y blur spread color inset;

Порядок значений критичен: смещение по X, смещение по Y, размытие, распространение, цвет и опциональное ключевое слово inset.

Позиция тени

Значения offset-x и offset-y управляют положением тени:

box-shadow: 10px 10px;

Положительные значения смещают тень вправо и вниз:

Отрицательные значения смещают тень влево и/или вверх:

box-shadow: -10px -10px;

Совет: для естественного света используйте небольшие смещения (2–8px) и небольшие значения blur; для декоративных эффектов — большие смещения и spread.

Размытие (blur)

Добавление третьего значения включает эффект размытия:

box-shadow: 10px 10px 20px;

Чем больше значение blur, тем мягче край тени. Это значение не может быть отрицательным.

Практическая подсказка: сочетайте небольшой offset и небольшой blur для реалистичных интерфейсных теней; для фоновых декоративных слоёв используйте большие blur и spread.

Распространение (spread)

Четвёртое значение управляет размерами тени без изменения её позиции:

box-shadow: 10px 10px 20px 30px;

Положительное значение spread увеличивает размер тени, отрицательное — уменьшает:

Цвет тени

По умолчанию цвет тени наследует цвет текста элемента, но его можно переопределить:

box-shadow: 10px 10px 20px 10px #0000ff;

Используйте допустимые CSS‑форматы цвета (hex, rgb, rgba, hsl). Рекомендуется применять rgba или hsla для контроля прозрачности:

box-shadow: 0 6px 18px rgba(0,0,0,0.25);

Внутренняя тень (inset)

По умолчанию тень отрисовывается снаружи. Чтобы отобразить её внутри элемента, добавьте ключевое слово inset:

box-shadow: 10px 10px 20px 10px #0000ff inset;

inset превращает тень в имитацию вдавленного края — полезно для кнопок и панелей.

Как использовать text-shadow

Синтаксис для текста проще:

text-shadow: offset-x offset-y blur-radius color;

Основные параметры совпадают по смыслу с box-shadow, но у text-shadow нет spread и inset.

Позиция тени текста

text-shadow: 10px 10px;

Положительные значения смещают тень вниз и вправо, отрицательные — вверх и влево.

text-shadow: -10px -10px;

Размытие тени текста

text-shadow: 10px 10px 10px;

Значение blur-radius по умолчанию равно 0 (без размытия).

Цвет тени текста

По умолчанию цвет тени совпадает с цветом текста. Вы можете задать любой CSS‑цвет:

text-shadow: 10px 10px 10px #0000ff;

Примечание: тени на тексте могут ухудшать читаемость, особенно на маленьких размерах и для людей с нарушением зрения. Проверяйте контраст и читаемость.

Примеры дизайна и приёмы

Ниже — практические шаблоны и идеи, которые можно использовать и модифицировать.

Двойные цветные границы с двумя box-shadow

Можно применять несколько теней, разделённых запятыми:

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

Два противоположных смещения без размытия создают эффект двойной рамки.

Двойные тени текста для драматичности

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Такой приём создаёт насыщенный «неоновый» или «гравировочный» эффект.

Многоцветные фоны с inset box-shadow

box-shadow: 20px 10px 10px 40px #000000 inset, -50px -30px 8px 60px gray inset, 30px 20px 6px 90px lightgray inset;

Несколько inset теней разного цвета перекрываются, создавая сложный фон без изображений.

Совет: комбинируйте inset с CSS‑градиентами для богатых фоновых вариаций.

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

• Фильтры CSS (filter: drop-shadow()) иногда дают более точный результат, когда тень должна учитывать непрямоугольную форму (например, у прозрачных PNG).
• SVG позволяет создавать более сложные или производительные тени для векторных элементов.
• Для анимаций тени могут быть тяжёлыми по производительности; рассмотрите псевдоэлементы (::before/::after) с градиентами вместо сложных многослойных теней.

Когда тени не подходят:

• Маленький текст: тени ухудшают читаемость.
• Тёмные интерфейсы с низким контрастом: яркие тени создают визуальный шум.
• Низкая производительность на мобильных устройствах: много-слойные тени могут тормозить.

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

• Тени рендерятся на GPU в большинстве современных браузеров, но слишком большое число и размер теней могут увеличить нагрузку.
• Тестируйте на мобильных устройствах и старых браузерах.
• Проверяйте читаемость текста с тенью: используйте инструменты проверки контраста и включайте альтернативы для пользователей с особенностями зрения.

Чек-листы по ролям

Дизайнер:

• Определить цель тени: разделение слоёв, фокус, декоративный элемент.
• Выбрать направление источника света и согласовать со стилем приложения.
• Подготовить понятные значения offset/blur/spread и цвета.

Разработчик:

• Реализовать тень через CSS с использованием rgba/hsla для прозрачности.
• Добавить запасные варианты для старых браузеров (простые градиенты или изображения).
• Провести визуальные тесты на разных разрешениях и в тёмной теме.

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

• Тень должна сохранять читаемость текста на всех целевых размерах и масштабах (проверить 100%, 150%, 200%).
• Визуально легкая тень для элементов интерфейса (обычно rgba(0,0,0,0.12–0.3) с blur 8–24px).
• Производительность: нет заметных просадок FPS при скролле и анимациях.
• Совместимость: отображение в последних версиях Chrome, Safari, Firefox и на iOS/Android.

Шпаргалка: быстрые шаблоны

• Лёгкая интерфейсная тень:

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

• Глубокая картинная тень:

box-shadow: 0 20px 40px rgba(0,0,0,0.4);

• Вдавленная кнопка:

box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);

• Неоновая подсветка текста:

text-shadow: 0 0 8px rgba(0,150,255,0.9);

Тестовые сценарии и приёмы проверки

1. Визуальный тест: сравнить компонент с эталоном при 100%, 150%, 200% масштабах.
2. Контраст: проверить читаемость текста поверх фоновых теней.
3. Производительность: профилировать рендеринг при скролле и анимации.
4. Кроссбраузерность: Chrome, Safari, Firefox, Edge, мобильные браузеры.

Ментальные модели и эвристики

• Модель света: решите, откуда идёт свет, и согласуйте смещения теней на всех компонентах.
• Иерархия: чем более важен элемент, тем более мягкая и менее контрастная должна быть тень (чтобы не отвлекать).
• Экономия слоёв: избегайте множества пересекающихся больших теней — это влияет на производительность.

Маленький глоссарий

• offset-x / offset-y — горизонтальное и вертикальное смещение тени.
• blur / blur-radius — радиус размытия края тени.
• spread — растяжение или сжатие размера тени.
• inset — ключевое слово, превращающее тень во внутреннюю.

Потенциальные ошибки и как их исправить

• Ошибка: тень слишком тёмная и «грязная» — уменьшите непрозрачность (rgba) и увеличьте blur.
• Ошибка: тень выглядит «плоско» — используйте комбинированные слои с разными blur и spread.
• Ошибка: тень замедляет анимацию — уменьшите количество слоёв или замените на псевдоэлемент.

Быстрая дорожная карта внедрения теней в проект

1. Определить визуальную систему и правила теней.
2. Подготовить переменные в CSS (Sass/CSS custom properties) для основных уровней тени.
3. Прототипировать и тестировать на мобильных устройствах.
4. Документировать примеры и критерии приёмки для команды.

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

Тени в CSS — гибкий инструмент для создания глубины и фокуса. С пониманием параметров offset, blur, spread, цвета и inset вы сможете создавать как тонкие интерфейсные тени, так и выразительные декоративные эффекты. Всегда проверяйте читаемость, производительность и кроссбраузерность.

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