Тень в CSS: box-shadow и text-shadow с готовыми примерами

Тень — самый быстрый способ оторвать элемент от фона. И самый быстрый способ испортить макет: чёрная тень на полной непрозрачности превращает аккуратную карточку в наклейку из девяностых.

Разберёмся, как тень устроена, чем box-shadow отличается от text-shadow и как получается та самая мягкая тень, которую хочется скопировать.

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

В CSS две разные тени, и путать их не стоит.

Тень блока рисует box-shadow. Она повторяет прямоугольник элемента вместе со скруглением углов.

Тень текста рисует text-shadow. Синтаксис короче: нет ни растяжения, ни внутренней тени.

/* смещение X, смещение Y, размытие, растяжение, цвет */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

/* смещение X, смещение Y, размытие, цвет */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

Значение читается слева направо. Первые два числа — смещение: положительное по Y опускает тень вниз, будто свет падает сверху. Третье — размытие краёв. Четвёртое (только у box-shadow) — растяжение, оно увеличивает или уменьшает тень целиком.

Подобрать значения на глаз тяжело: их четыре, и они влияют друг на друга. Проще покрутить ползунки и забрать готовый код.

Готовые тени для копирования

Карточка

Секрет мягкой тени — в двух слоях. Один короткий и плотный даёт «прижатие» к поверхности, второй длинный и размытый — объём.

.card {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 8px 24px rgba(0, 0, 0, 0.12);
}

Кнопка

Короткое смещение и небольшое размытие: кнопка приподнята, но не парит над макетом.

.button {
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4);
}

Обратите внимание: тень не чёрная, а синяя — того же тона, что и сама кнопка. Так тень выглядит частью элемента, а не грязным пятном под ним.

Внутренняя тень

Ключевое слово inset уводит тень внутрь элемента. Так делают вдавленные кнопки и поля ввода.

.input {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

У text-shadow ключевого слова inset нет — тень текста всегда снаружи.

Свечение

Нулевое смещение, крупное размытие и цветная тень дают ореол вместо тени.

.glow {
	box-shadow: 0 0 20px 3px rgba(59, 130, 246, 0.5);
}

Тень при наведении

Чтобы карточка приподнималась под курсором, опишите тень в состоянии :hover и добавьте переход.

.card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Важно: анимируйте только тень. Не трогайте margin, height или top — эти свойства заставляют браузер пересчитывать раскладку страницы на каждом кадре, и на слабых устройствах движение начнёт дёргаться.

Если хочется, чтобы карточка ещё и приподнималась, двигайте её через transform: translateY(-4px) — это свойство считается на видеокарте и вёрстку не трогает.

Плавность перехода задаёт функция времени. Стандартного ease хватает почти всегда, но если нужна своя кривая — соберите её мышью:

Тень текста

text-shadow работает так же, но без растяжения и inset. Чаще всего его берут ради читаемости — когда светлый заголовок лежит поверх фотографии.

/* Мягкая тень: аккуратно отделяет заголовок от фона */
.title {
	text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Текст поверх фото: два слоя удерживают контраст на пёстрой картинке */
.hero-title {
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.8),
		0 0 12px rgba(0, 0, 0, 0.6);
}

/* Неон: несколько слоёв одного цвета с растущим размытием */
.neon {
	color: #fff;
	text-shadow:
		0 0 8px rgba(244, 63, 94, 0.9),
		0 0 20px rgba(244, 63, 94, 0.7),
		0 0 40px rgba(244, 63, 94, 0.4);
}

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

Почему красивая тень — не чёрная

Главная ошибка — чёрный цвет на полной непрозрачности. В жизни свет рассеивается, и тень никогда не бывает угольной.

Три правила, из которых складывается приличная тень:

Низкая непрозрачность. Берите rgba с альфой 0.08–0.15, а не сплошной чёрный. Плотная тень выглядит как грязь под элементом.

Крупное размытие. 15–30px вместо 3–5px. Резкая тень читается как ошибка вёрстки, а не как объём.

Оттенок, а не чернота. Тень под синей кнопкой должна быть синеватой, под тёплой карточкой — коричневатой. Проще всего взять цвет фона и затемнить его. Крутить светлоту удобно в HSL, где она вынесена в отдельный канал:

Небольшое отрицательное растяжение (-1px, -2px) подтягивает тень под элемент и убирает ореол по краям — тень перестаёт «выглядывать» из-под карточки со всех сторон.

Несколько теней одному элементу

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

.elevated {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 4px 8px rgba(0, 0, 0, 0.08),
		0 16px 32px rgba(0, 0, 0, 0.1);
}

Правило простое: чем дальше слой, тем больше размытие и меньше непрозрачность. Так работает настоящий свет.

box-shadow или filter: drop-shadow

Их часто путают, а разница принципиальная.

box-shadow всегда повторяет прямоугольник элемента — с учётом border-radius, но всё же прямоугольник.

filter: drop-shadow() повторяет фактическую форму содержимого: прозрачные области PNG, контуры SVG, вырезы в иконке.

/* Тень по форме иконки, а не по её рамке */
.icon {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

Для карточек и кнопок берите box-shadow. Для иконок и картинок с прозрачным фоном — drop-shadow, иначе тень ляжет квадратом вокруг круглого логотипа.

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

На поток вёрстки тень не влияет — она не занимает места и не двигает соседние элементы. А вот крупное размытие браузеру считать дорого, особенно на мобильных.

Ключевая мысль: не анимируйте box-shadow напрямую. Каждый кадр браузер перерисовывает размытие заново. Если тень должна появляться плавно, положите её на псевдоэлемент и анимируйте его opacity — это дёшево.

.card {
	position: relative;
}

.card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.card:hover::after {
	opacity: 1;
}

Приём выглядит громоздко, но на странице с десятками карточек разница в плавности заметна невооружённым глазом.

Коротко

• box-shadow — тень блока, text-shadow — тень текста, inset есть только у первого.
• Красивая тень — не чёрная: альфа 0.08–0.15, размытие 15–30px, оттенок под цвет элемента.
• Два-три слоя с разным размытием выглядят естественнее одного.
• Для иконок с прозрачностью — filter: drop-shadow(), не box-shadow.
• Анимируете тень — анимируйте opacity псевдоэлемента, а не саму тень.