Как сделать тень в CSS для блока, текста и картинки

CSS тень блока создают через box-shadow, тень текста – через text-shadow, а прозрачной картинки – через filter: drop-shadow(). Готовое правило для карточки выглядит так:

.card {
  box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
}

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

Как сделать тень в CSS

Для блока, кнопки или поля берите box-shadow. Для букв используйте text-shadow, а для PNG и SVG с прозрачностью – filter: drop-shadow().

<div class="card">Карточка с тенью</div>

.card {
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
}

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

Синтаксис box-shadow

Первые два значения задают смещение по X и Y. Размытие и растяжение уточняют форму слоя, а цвет и inset меняют его вид и положение.

.example {
  box-shadow: 4px 8px 16px -2px rgb(0 0 0 / 20%);
}

Длины идут в порядке X, Y, blur, spread. Цвет и inset можно поставить перед группой длин или после нее. Проценты для смещения, размытия и растяжения не подходят.

Если пропустить blur, браузер использует 0, поэтому край получится резким. Чтобы задать spread, укажите перед ним размытие, хотя бы нулевое.

Без цвета браузер берет вычисленное значение color, то есть currentColor. Для компонентов с разными состояниями задавайте цвет явно.

Отрицательный spread сжимает контур перед размытием, помогая оставить тень узкой полосой возле одной стороны.

Несколько слоев box-shadow

Разделяйте слои запятыми. Первый слой списка рисуется поверх следующих, поэтому ближний контур ставьте первым.

.layered {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 12%),
    0 12px 24px rgb(0 0 0 / 10%);
}

Новое объявление заменяет весь прежний список; значение box-shadow: none убирает все слои.

Полный синтаксис описан в документации MDN по box-shadow.

CSS тень блока: готовые рецепты

Выберите направление и перенесите правило в свой селектор. Для оценки результата задайте блоку непрозрачный фон и оставьте место вокруг него.

Тень снизу

.shadow-bottom {
  box-shadow: 0 6px 4px -4px rgb(0 0 0 / 20%);
}

Смещение 6px уводит слой вниз. Spread −4px сужает его по краям и оставляет затемнение под нижней кромкой.

Тень по бокам

.shadow-sides {
  box-shadow:
    -23px 0 20px -23px rgb(0 0 0 / 45%),
    23px 0 20px -23px rgb(0 0 0 / 45%);
}

Два противоположных значения X создают одинаковые слои слева и справа. Отрицательный spread удерживает их возле краев.

Тень с одной стороны

.shadow-right {
  box-shadow: 8px 0 8px -6px rgb(0 0 0 / 25%);
}

Положительный X оставляет основной след справа. Для левой стороны замените первое значение на −8px. Размытие может оставлять слабый след возле соседних кромок.

Тень вокруг блока

.shadow-around {
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 15%);
}

Нулевые смещения распределяют слой равномерно. Spread 3px расширяет его до размытия.

Мягкая многослойная тень

.shadow-soft {
  box-shadow:
    0 2px 4px rgb(0 0 0 / 6%),
    0 8px 16px rgb(0 0 0 / 8%),
    0 24px 48px rgb(0 0 0 / 10%);
}

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

Внутренняя тень CSS с помощью inset

Ключевое слово inset рисует слой внутри границ блока. При положительном Y внешняя тень выступает снизу, а внутренняя затемняет верхнюю кромку.

Вдавленная кнопка при нажатии

<button class="press-button" type="button">Нажмите и удерживайте</button>

.press-button {
  padding: 12px 20px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #e2e8f0;
  color: #0f172a;
}

.press-button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 25%);
}

Слой затемняет верхнюю внутреннюю кромку во время нажатия. После отпускания состояние :active исчезает.

Поле ввода в фокусе

<label>Имя <input class="field" type="text"></label>

.field {
  padding: 10px 12px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
}

.field:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 14%),
    0 0 0 3px rgb(37 99 235 / 16%);
}

Внутренний слой затемняет поверхность. Внешний слой и outline сохраняют заметный фокус клавиатуры. Перейдите к полю клавишей Tab, чтобы увидеть оба слоя.

Тень текста в CSS через text-shadow

Свойство text-shadow принимает X, Y, blur и цвет. У него нет параметров spread и inset.

.title {
  text-shadow: 1px 2px 4px rgb(0 0 0 / 35%);
}

Первые два размера обязательны. Blur по умолчанию равен 0; отрицательное значение делает тень недопустимой. При пропущенном цвете браузер берет currentColor.

Обводка и свечение

.text-outline {
  color: #fff;
  text-shadow:
    -1px 0 0 rgb(0 0 0 / 75%),
    1px 0 0 rgb(0 0 0 / 75%),
    0 -1px 0 rgb(0 0 0 / 75%),
    0 1px 0 rgb(0 0 0 / 75%);
}

.text-glow {
  color: #fff;
  background: #0f172a;
  text-shadow:
    0 0 6px rgb(56 189 248 / 70%),
    0 0 18px rgb(56 189 248 / 45%);
}

Четыре резких смещения имитируют тонкую обводку вокруг букв. Размытые цветные слои создают свечение на темном фоне.

Несколько слоев разделяйте запятыми. Первый слой списка рисуется поверх следующих.

Заголовок поверх фотографии

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

.photo-title {
  display: inline-block;
  padding: 12px 16px;
  color: #fff;
  background: rgb(0 0 0 / 60%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}

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

Имитация вдавленного текста

.engraved-text {
  background: #cbd5e1;
  color: #475569;
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
}

Светлый слой имитирует отраженный край букв. Это оптический эффект внешней тени, потому что у text-shadow нет inset.

Справочные примеры собраны в документации MDN по text-shadow.

Тень картинки: box-shadow или filter: drop-shadow()

box-shadow повторяет прямоугольную коробку элемента с учетом скругления. drop-shadow() учитывает прозрачность отрисованного содержимого.

PNG и SVG с прозрачностью

Положите прозрачный PNG рядом с HTML-файлом под именем product.png. Звезда SVG из примера не требует отдельного файла.

<img class="product-image" src="product.png" alt="Прозрачное изображение товара">

<svg class="svg-icon" viewBox="0 0 64 64" role="img" aria-label="Звезда">
  <path fill="#f59e0b" d="M32 4 40 22 60 24 45 38 49 58 32 48 15 58 19 38 4 24 24 22Z"></path>
</svg>

.product-image {
  max-width: 100%;
  filter: drop-shadow(0 8px 6px rgb(0 0 0 / 25%));
}

.svg-icon {
  width: 64px;
  height: 64px;
  overflow: visible;
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 30%));
}

Прозрачный файл передает фильтру силуэт предмета. PNG с непрозрачным фоном даст прямоугольную тень.

У функции нет spread. Третье значение задает стандартное отклонение размытия, поэтому числа blur у двух способов несопоставимы напрямую.

Подробный синтаксис описан в документации MDN по drop-shadow().

Внутренняя тень поверх фотографии

Изображение в img закрывает внутренний слой самого элемента. Оберните картинку и рисуйте тень псевдоэлементом. Для примера сохраните свою фотографию рядом с HTML как photo.jpg.

<div class="image-frame">
  <img class="image-frame-photo" src="photo.jpg" alt="Пейзаж">
</div>

.image-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
}

.image-frame-photo {
  display: block;
  max-width: 100%;
  border-radius: inherit;
}

.image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 24px rgb(0 0 0 / 45%);
  pointer-events: none;
}

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

Тени для карточки и заголовка: готовые значения

Выберите уровень по визуальной высоте компонента. Для наведения используйте соседний уровень и переход по свойству тени.

Переменные и плавное наведение

.theme {
  --shadow-1: 0 1px 3px rgb(15 23 42 / 12%);
  --shadow-2: 0 4px 12px rgb(15 23 42 / 14%);
  --shadow-3: 0 10px 24px rgb(15 23 42 / 18%);
}

.elevation-card {
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-2);
  transition: box-shadow 180ms ease;
}

.elevation-card:hover,
.elevation-card:focus-within {
  box-shadow: var(--shadow-3);
}

<div class="theme">
  <article class="elevation-card">
    <a href="#details">Название карточки</a>
    <p id="details">Описание товара</p>
  </article>
</div>

Переменные хранят шкалу в одном месте. Наведите указатель на карточку или выберите ссылку клавишей Tab. Тень плавно перейдет с уровня 2 на уровень 3.

Темная тема

.theme-dark {
  --shadow-2: 0 4px 12px rgb(0 0 0 / 40%);
  --shadow-3: 0 10px 24px rgb(0 0 0 / 55%);
  background: #0f172a;
}

.theme-dark .elevation-card {
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid rgb(255 255 255 / 12%);
}

Добавьте класс theme-dark контейнеру с классом theme. Черная тень на темном фоне теряет край, поэтому светлая граница разделяет поверхности.

Готовые text-shadow для заголовка

Генератор тени CSS

Генератор тени css помогает подбирать смещение и размытие визуально. Для многослойного результата соединяйте отдельные значения запятыми. Окончательный вид оценивайте на фоне своего проекта.

CSS Generator – css shadow generator для блока и текста

CSS Generator содержит инструменты для подбора теней блока и текста. Отдельный text shadow css generator пригодится для заголовка: у текстовой тени меньше параметров, чем у тени карточки.

CSS3 Generator для тени блока

CSS3 Generator включает генератор тени блока среди других CSS-инструментов. Для карточки выбирайте инструмент box-shadow. Цифра в названии сервиса не означает, что свойству нужны префиксы.

CSS3Gen для подбора тени

CSS3Gen – еще один вариант генератора тени блока. Переносите в проект само объявление box-shadow; селектор заменяйте на класс своего компонента.

Как собрать многослойную тень в DevTools Chrome и Firefox

Инспектор браузера показывает результат непосредственно на странице проекта. В Chrome и Firefox можно редактировать значения CSS выбранного элемента, включая несколько слоев тени.

1. Откройте контекстное меню карточки и выберите команду инспектирования элемента. Браузер откроет инструменты разработчика и выделит ее HTML.
2. В области CSS-правил выбранного элемента добавьте box-shadow: 0 4px 12px rgb(0 0 0 / 20%). Под карточкой появится мягкая тень.
3. Если возле значения доступна кнопка визуального редактора тени, откройте ее. Если кнопки нет, изменяйте числа прямо в объявлении: замените 4px на 8px, и тень сместится ниже.
4. Добавьте после первого значения запятую и второй слой: 0 16px 32px rgb(0 0 0 / 10%). У карточки появится более широкий мягкий ореол.
5. Скопируйте итоговое объявление в правило карточки в CSS-файле проекта. Сохраните файл и перезагрузите страницу: тень должна остаться.

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

Ошибки при работе с CSS-тенями

Когда тень не видна, сначала найдите примененное правило в инспекторе. Затем проверьте обрезку, фон и форму содержимого.

• Родитель обрезает тень. overflow: hidden скрывает выступающий слой. Перенесите внешнюю тень на обертку без обрезки.
• Тень не раздвигает соседей. box-shadow не меняет раскладку. Добавьте расстояние через gap или отступ.
• Inset пропал на картинке. Непрозрачное изображение закрывает внутренний слой. Используйте псевдоэлемент обертки.
• Черная полоса выглядит жестко. Попробуйте прозрачность 20% и увеличьте blur.
• Тень теряется на темном фоне. Добавьте тонкую светлую границу поверхности.
• Правило не применяется. Проверьте отрицательный blur, spread у text-shadow и запятые между слоями.

Как уменьшить нагрузку от анимации

Анимация большого box-shadow может запускать повторную отрисовку. Подготовьте слой псевдоэлемента и меняйте его прозрачность.

<button class="fast-shadow" type="button">Навести или выбрать</button>

.fast-shadow {
  position: relative;
  isolation: isolate;
  padding: 16px 24px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
}

.fast-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 12px 28px rgb(0 0 0 / 20%);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.fast-shadow:hover::before,
.fast-shadow:focus-visible::before {
  opacity: 1;
}

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

Как выбрать тень под задачу

Для карточки начните с уровня 2 и усиливайте тень при наведении. Для силуэта прозрачной картинки используйте drop-shadow(). Заголовку на фотографии добавьте темную подложку, если одной тени недостаточно для читаемости.

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