CSS box-shadow — тени для элементов

box-shadow — CSS-свойство для добавления тени к блочным элементам. С его помощью создают эффект глубины, выделяют карточки, делают кнопки «выпуклыми» и реализуют neon-glow эффекты — всё без изображений.

Синтаксис box-shadow — разбор по частям

/* box-shadow: offset-x  offset-y  blur  spread  color */
box-shadow:       4px     4px     10px    0     rgba(0,0,0,0.2);

/* Что означает каждое значение: */
/* offset-x: смещение по горизонтали (+ вправо, - влево) */
/* offset-y: смещение по вертикали   (+ вниз, - вверх)   */
/* blur:     размытие тени (0 = чёткая тень)              */
/* spread:   расширение тени (+ больше, - меньше, 0 = нет) */
/* color:    цвет тени                                     */

/* Примеры */
box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);  /* тень вниз-вправо */
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.12);   /* тень только вниз */
box-shadow: -4px 0 8px 0 rgba(0,0,0,0.1);    /* тень влево */
box-shadow: 0 0 20px 0 rgba(37,99,235,0.4);  /* цветное свечение */

/* Без тени */
box-shadow: none;

Готовые тени для карточек — от лёгкой до сильной

Вот градуированная система теней, которую удобно использовать как CSS-переменные в проекте:

/* Система теней (elevation system) */

/* shadow-xs — едва заметная */
box-shadow: 0 1px 2px rgba(0,0,0,0.05);

/* shadow-sm — лёгкая для карточек */
box-shadow: 0 1px 3px rgba(0,0,0,0.10),
            0 1px 2px rgba(0,0,0,0.06);

/* shadow-md — средняя */
box-shadow: 0 4px 6px rgba(0,0,0,0.07),
            0 2px 4px rgba(0,0,0,0.06);

/* shadow-lg — заметная, для попапов */
box-shadow: 0 10px 15px rgba(0,0,0,0.10),
            0  4px  6px rgba(0,0,0,0.05);

/* shadow-xl — сильная, для модалок */
box-shadow: 0 20px 25px rgba(0,0,0,0.10),
            0  8px 10px rgba(0,0,0,0.04);

/* shadow-2xl — максимальная */
box-shadow: 0 25px 50px rgba(0,0,0,0.25);

/* Использование через CSS переменные */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px  rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);
}

.card   { box-shadow: var(--shadow-sm); }
.modal  { box-shadow: var(--shadow-xl); }
.popup  { box-shadow: var(--shadow-lg); }

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

Ключевое слово inset перед значениями переключает тень внутрь элемента. Это создаёт эффект вдавленности или вложенности.

/* Внутренняя тень */
div { box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }

/* Поле ввода — эффект углублённости */
input {
  border: 1px solid #d1d5db;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Кнопка в нажатом состоянии */
.button { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.button:active {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);  /* вдавливается */
  transform: translateY(1px);
}

/* Подсветка сверху (highlight) */
.glass-card {
  background: rgba(255,255,255,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),  /* белая подсветка сверху */
    0 8px 32px rgba(0,0,0,0.3);           /* внешняя тень */
}

Несколько теней через запятую

Одному элементу можно задать несколько теней сразу — через запятую. Первая тень в списке рисуется поверх последующих.

/* Многослойная реалистичная тень */
.card {
  box-shadow:
    0  2px  4px rgba(0,0,0,0.04),   /* ближний слой */
    0  4px  8px rgba(0,0,0,0.04),   /* средний */
    0  8px 16px rgba(0,0,0,0.04),   /* дальний */
    0 16px 32px rgba(0,0,0,0.04);   /* самый дальний */
}

/* Цветная тень + обычная */
.button-blue {
  background: #2563eb;
  box-shadow:
    0 4px 14px rgba(37,99,235,0.5),  /* цветная */
    0 2px 4px  rgba(0,0,0,0.1);     /* обычная серая */
}

/* Внешняя + внутренняя подсветка */
.premium-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),  /* внутренняя подсветка */
    0 8px 24px rgba(0,0,0,0.15);          /* внешняя тень */
}

Hover-эффект с тенью — карточка поднимается

Анимация тени через transition — один из самых популярных UI-паттернов. Карточка как будто «поднимается» при наведении.

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition:
    box-shadow 0.25s ease,
    transform   0.25s ease;
}

.card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-4px);  /* поднимается вверх */
}

/* Вариант с цветной тенью */
.card-colored {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 15px rgba(102,126,234,0.4);
  transition: box-shadow 0.3s, transform 0.3s;
}

.card-colored:hover {
  box-shadow: 0 8px 30px rgba(102,126,234,0.7);
  transform: translateY(-3px);
}

Neon glow — светящаяся тень

Несколько слоёв box-shadow с одним цветом создают эффект свечения — популярный в dark-дизайне.

/* Синий неон */
.neon-blue {
  border: 2px solid #2563eb;
  box-shadow:
    0 0 5px  rgba(37,99,235,0.7),
    0 0 15px rgba(37,99,235,0.5),
    0 0 40px rgba(37,99,235,0.3);
}

/* Зелёный неон */
.neon-green {
  border: 2px solid #22c55e;
  box-shadow:
    0 0 5px  rgba(34,197,94,0.8),
    0 0 20px rgba(34,197,94,0.5),
    0 0 50px rgba(34,197,94,0.3);
}

/* Неон при hover */
.neon-button {
  border: 2px solid #a855f7;
  background: transparent;
  color: #a855f7;
  transition: box-shadow 0.3s;
}

.neon-button:hover {
  box-shadow:
    0 0 10px rgba(168,85,247,0.8),
    0 0 30px rgba(168,85,247,0.6),
    0 0 60px rgba(168,85,247,0.3);
  color: white;
}

box-shadow vs filter: drop-shadow

CSS предлагает два способа создания теней. Они похожи, но работают по-разному:

/* box-shadow: тень у прямоугольника */
img { box-shadow: 4px 4px 10px rgba(0,0,0,0.3); }
/* Для PNG с прозрачным фоном — тень будет прямоугольной */

/* filter: drop-shadow — тень по контуру изображения */
img { filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.3)); }
/* Для PNG с прозрачным фоном — тень повторяет форму объекта */

/* drop-shadow синтаксис: без spread, нет inset */
filter: drop-shadow(offset-x offset-y blur color);

Часто задаваемые вопросы о box-shadow

Как сделать тень только снизу в CSS?

Используй комбинацию: смещение только по Y, небольшое размытие, и отрицательное spread чтобы срезать боковые части: box-shadow: 0 4px 6px -2px rgba(0,0,0,0.2). Значение -2px в spread «подтягивает» тень внутрь, убирая боковые артефакты.

Почему box-shadow не работает на tr и td в таблице?

box-shadow не применяется к элементам таблицы (tr, td, th) в большинстве браузеров — только к контейнерам с display: block, inline-block, flex или grid. Для тени строки таблицы используй outline или оберни таблицу в div и добавь тень к нему.

Как сгенерировать красивый box-shadow онлайн?

Лучшие инструменты: box-shadow.dev — визуальный редактор, сразу видно результат; neumorphism.io — специально для neumorphism стиля с двумя тенями; shadows.brumm.af — генератор плавных многослойных теней. В Chrome DevTools также можно редактировать тени кликнув на значение box-shadow в панели Styles.