CSS-тени для блоков и текста: руководство и примеры

Важно: box-shadow и text-shadow — визуальные эффекты, которые не влияют на документный поток. При обильном использовании они могут повлиять на производительность и восприятие доступности.

О чём эта статья

В этой статье подробно разобраны свойства box-shadow и text-shadow в CSS: синтаксис, поведение каждого параметра, практические примеры, распространённые приёмы, альтернативы и рекомендации по доступности и оптимизации.

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

Свойство box-shadow управляет тенями элементa. Одна строка CSS может содержать до шести значений. Порядок критичен:

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

Коротко о каждом параметре:

• offset-x — горизонтальное смещение тени (px, em, rem и т.д.)
• offset-y — вертикальное смещение тени
• blur — радиус размытия (не может быть отрицательным)
• spread — расширение/сжатие тени
• color — цвет тени (hex, rgb(a), hsl(a), var())
• inset — необязательное ключевое слово для внутренней тени

Позиция тени (offset-x, offset-y)

offset-x управляет смещением по горизонтали, offset-y — по вертикали. Положительные значения смещают тень вправо и вниз.

box-shadow: 10px 10px;

Положительные значения:

Можно использовать отрицательные значения, чтобы сместить тень влево или вверх:

box-shadow: -10px -10px;

Размытие (blur)

Третий параметр — радиус размытия. Чем больше значение, тем мягче и шире тень. Значение не может быть отрицательным.

box-shadow: 10px 10px 20px;

Spread — расширение тени

Четвёртое значение управляет размерами области тени без изменения позиции. Положительное значение увеличивает область тени, отрицательное — сжимает.

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

Цвет тени

По умолчанию цвет тени наследуется от цвета текста, но лучше явно задавать цвет — часто с прозрачностью:

box-shadow: 10px 10px 20px 10px #0000ff;
/* или с прозрачностью */
box-shadow: 10px 10px 30px rgba(0,0,0,0.35);

Применяйте rgba() или hsla(), чтобы контролировать прозрачность тени и избежать слишком тяжёлого визуального эффекта.

inset — внутренняя тень

Добавление ключевого слова inset переводит тень внутрь элемента.

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

Inset удобно использовать для имитации углублений, рельефов и внутренних подсветок.

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

text-shadow похож по концепции, но имеет менее параметров:

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

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

Смещения работают так же, как у box-shadow:

text-shadow: 10px 10px;

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

text-shadow: -10px -10px;

Размытие радиуса тени текста

Третий параметр задаёт размытие тени для текста. По умолчанию 0 — резкая тень.

text-shadow: 10px 10px 10px;

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

По умолчанию тень наследует цвет текста. Часто используют rgba или полупрозрачные цвета:

text-shadow: 10px 10px 10px #0000ff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

Дизайнерские приёмы и примеры

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

Двойная рамка через две box-shadow

Вы можете указать несколько теней через запятую. Это простой способ нарисовать двойную рамку:

.box-dual-border {
  box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;
}

Драматические текстовые тени

Несколько text-shadow создают ощущение глубины или подсветки:

h1 { text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray; }

Многослойный фон с inset-тенями

Inset-тени позволяют составлять сложные фоны без дополнительных изображений:

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

Добавьте градиент background-image поверх инсет-теней для более сложного оформления.

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

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

Пример использования drop-shadow для PNG:

.img-shadow { filter: drop-shadow(0 8px 10px rgba(0,0,0,0.4)); }

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

• Представьте источник света: смещения offset-x/offset-y соответствуют положению светильника относительно элемента.
• Blur = «рассеивание» света. Малое значение — резкая тень, большое — мягкая подсветка.
• Spread = «размер отбрасываемой тени» — влияет на общую видимую площадь тени.
• Используйте rgba(hsl) для контроля прозрачности, чтобы тень выглядела естественно поверх любых фонов.

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

• box-shadow рендерится в слое композитинга современных браузеров, но слишком много больших или анимируемых теней может нагрузить GPU/CPU.
• text-shadow для большого количества текста может повлиять на производительность при анимации.
• filter: drop-shadow может быть более эффективен для изображений с прозрачностью.
• Тестируйте на целевых устройствах, особенно на слабых смартфонах.

Поддержка: box-shadow и text-shadow поддерживаются всеми современными браузерами. SVG-фильтры и некоторые сложные эффекты могут требовать тестирования в старых версиях браузеров.

Доступность и контраст

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

Чек-лист перед релизом (роли: дизайнер / фронтенд)

• Дизайнер:

  • Проверил контраст и читаемость текста с тенью
  • Оценил тени на ключевых разрешениях и в тёмной теме
  • Подобрал цвета теней с учётом фона

• Фронтенд:

  • Использует rgba()/hsla() или CSS-переменные для цветов теней
  • Проверил производительность на мобильных устройствах
  • Не анимирует тяжёлые тени без тестов производительности
  • Обработка фолбэков для старых браузеров (если нужно)

Playbook: как выбрать и реализовать тень (короткая методология)

1. Решите цель: акцент, глубина, подложка или декоративный эффект.
2. Выберите источник света (угол смещения).
3. Начните с малых значений: offset 2–6px, blur 6–20px, alpha 0.15–0.4.
4. Проверьте на нескольких фонах и плотностях пикселей.
5. Если нужно сложное ощущение глубины, комбинируйте несколько теней через запятую.
6. Тестируйте производительность при анимации.

Готовые сниппеты / cheat sheet

• Лёгкая универсальная тень:

.box-light {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

• Карточная тень (часто используется в UI):

.card {
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
}

• Подчёркивающая тень для текста:

.title {
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

• Внутренняя «вдавленность» кнопки:

.btn-inset {
  background: #f6f6f6;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.12);
}

Отладка и типичные проблемы

• Тень не видна: проверьте, нет ли overflow: hidden на родителе или z-index, который закрывает тень.
• Тень «обрезается»: убедитесь, что у элемента достаточно места вокруг (паддинг/отступы) или у родителя нет overflow: hidden.
• Слишком жёсткая тень: уменьшите непрозрачность цвета или увеличьте blur.
• Тени при анимации приводят к лагам: рассмотрите анимацию transform/opacity вместо интенсивного изменения box-shadow.

Когда тени работать не будут или дадут нежелательный эффект

• На тонком мелком тексте тень может ухудшить читаемость.
• При наложении большого количества пересекающихся полупрозрачных теней цвет может стать слишком насыщенным.
• В интерфейсах с ограниченной вычислительной мощностью (старые телефоны) тяжёлые тени могут снизить отзывчивость.

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

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

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

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

Небольшая диаграмма принятия решения

flowchart TD
  A[Нужна тень?] --> B{Элемент —
  изображение с альфа?}
  B -- Да --> C[Используйте filter: drop-shadow]
  B -- Нет --> D{Нужна внутренняя тень?}
  D -- Да --> E[Испуйте box-shadow inset]
  D -- Нет --> F[Используйте box-shadow или text-shadow]
  C --> G[Тестировать на производительности]
  E --> G
  F --> G

Примеры тест-кейсов

• Проверить видимость тени на белом, светлом и тёмном фоне.
• Измерить FPS при анимации тени на мобильном устройстве.
• Убедиться, что тень не обрезана при разных внутренних отступах и overflow-у родителя.

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

Тени в CSS — лёгкий способ добавить глубину, контраст и выразительность интерфейсу. box-shadow даёт гибкость для блоков, а text-shadow — для текста. Комбинирование нескольких теней, использование rgba и inset расширяют визуальные возможности, но важно учитывать доступность и производительность. Следуйте чек-листу, тестируйте на целевых устройствах и используйте альтернативы (filter, SVG), когда они подходят лучше.

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