Тень в 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 псевдоэлемента, а не саму тень.