box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
shadow-[0px_4px_6px_-1px_rgba(0,_0,_0,_0.1)]
Готовые тени — кликните, чтобы загрузить в конструктор
Как сделать тень в CSS
В CSS две тени, и путать их не стоит. Тень блока рисует box-shadow, она повторяет прямоугольник элемента вместе со скруглением углов. Тень букв рисует text-shadow, синтаксис у него короче, растяжения и внутренней тени нет вовсе. Генератор выше умеет обе: переключите режим в блоке «Что затеняем».
Значение читается слева направо: сначала смещение по X и Y, затем размытие, затем (только у box-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);Готовые тени для блоков
Четыре тени, которые закрывают почти все задачи вёрстки. Скопируйте код и вставьте в свой CSS или соберите собственный вариант в генераторе выше.
Тень карточки
Мягкая многослойная тень. Два слоя с разным размытием выглядят естественнее одного.
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(0, 0, 0, 0.12);Тень кнопки
Короткое смещение и небольшое размытие. Кнопка приподнята, но не парит над макетом.
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4);Внутренняя тень (inset)
Ключевое слово inset уводит тень внутрь. Так делают вдавленные кнопки и поля ввода.
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);Свечение вокруг элемента
Нулевое смещение, крупное размытие и цветная тень дают ореол вместо тени.
box-shadow: 0 0 20px 3px rgba(59, 130, 246, 0.5);Тень при наведении
Чтобы карточка приподнималась под курсором, опишите тень в состоянии :hover и добавьте переход. Анимируйте только тень. margin и height не трогайте, иначе браузер будет пересчитывать вёрстку на каждом кадре.
.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);
}Плавность перехода задаёт функция времени. Подобрать свою можно в генераторе cubic-bezier, а полноценная анимация собирается в конструкторе CSS-анимаций.
Тень текста
text-shadow работает так же, но без растяжения и inset. Чаще всего его берут ради читаемости, когда светлый заголовок лежит поверх фотографии.
Мягкая тень текста
Аккуратно отделяет заголовок от фона, не мешая читаемости.
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);Текст поверх фотографии
Два слоя тени удерживают контраст на пёстрой картинке.
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.8),
0 0 12px rgba(0, 0, 0, 0.6);Неоновый текст
Несколько слоёв одного цвета с растущим размытием, и буквы светятся.
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);Параметры тени
| Параметр | Что делает |
|---|---|
offset-x | Смещение тени по горизонтали. Положительное значение сдвигает вправо, отрицательное влево. |
offset-y | Смещение по вертикали. Положительное значение опускает тень вниз, будто свет падает сверху. |
blur-radius | Размытие краёв. Ноль даёт резкую тень, большие значения дают мягкий рассеянный ореол. |
spread-radius | Растяжение, оно увеличивает или уменьшает тень целиком. Только у box-shadow. |
color | Цвет тени. Почти всегда rgba с низкой альфой, чистый чёрный выглядит грязно. |
inset | Переносит тень внутрь элемента. Только у box-shadow; text-shadow его не поддерживает. |
Как получается красивая тень
Главная ошибка — чёрная тень на полной непрозрачности. В жизни свет рассеивается, поэтому берите rgba с альфой 0.08–0.15 и размытие 15–30px. Небольшое отрицательное растяжение подтягивает тень под элемент и убирает ореол по краям. Два-три слоя с разным размытием дают глубину, которой не добиться одним. Оттенок тени полезно брать не чёрный, а затемнённый цвет фона, подобрать его поможет конвертер цветов.
box-shadow или filter: drop-shadow
box-shadow всегда повторяет прямоугольник элемента с учётом border-radius. filter: drop-shadow() повторяет фактическую форму содержимого: прозрачные области PNG и контуры SVG. Для карточек и кнопок берите первое, для иконок и картинок с прозрачным фоном второе. Фон под тенью удобно собрать в генераторе градиентов.
Больше готовых теней, разбор inset и приёмы для «красивой», а не серой тени собраны в полном руководстве по теням в CSS.