Коротко: тень в CSS задаётся свойством box-shadow (для блоков) и text-shadow (для текста). Формат box-shadow: сдвиг по X, сдвиг по Y, размытие, растяжение, цвет. Тень можно сделать снаружи (outset) и внутри (inset), одну или несколько сразу.
Как читать синтаксис
| Значение | Что означает | Пример |
|---|---|---|
| X | сдвиг по горизонтали | 0 — тень строго снизу |
| Y | сдвиг по вертикали | 4px — тень смещена вниз |
| blur | размытие | 12px — мягкая тень |
| spread | растяжение (необязательно) | 0 или -2px |
| color | цвет, обычно с прозрачностью | rgba(0,0,0,.12) |
Вкладки: 4 вида теней с кодом
.card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }Базовая «приподнятая» карточка. Чем больше blur и меньше непрозрачность — тем аккуратнее.
.card { box-shadow: 0 2px 6px rgba(0,0,0,.10); transition: box-shadow .2s; }
.card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.18); }Лёгкая тень в покое и заметная при наведении — элемент «приподнимается». Добавьте transition, чтобы переход был плавным.
.input { box-shadow: inset 0 2px 4px rgba(0,0,0,.15); }inset рисует тень внутри блока — эффект «вдавленного» поля.
.btn {
box-shadow:
0 1px 2px rgba(0,0,0,.16),
0 8px 20px rgba(0,0,0,.10);
}Две тени через запятую: «контактная» внизу и мягкая дальняя. Так делают реалистичную глубину у кнопок и карточек.
rgba(0,0,0, .08–.18), а не чёрный 100%. Чистый чёрный смотрится грязно. И держите сдвиг по Y больше нуля — тень всегда снизу от источника света.Тень текста
h1 { text-shadow: 0 2px 4px rgba(0,0,0,.25); }Формат как у box-shadow, но без spread и inset. Полезно для читаемости текста поверх фото. Для обычных заголовков на белом фоне тень обычно лишняя.
Практика: карточка и кнопка
- Задайте карточке базовую тень
0 4px 12px rgba(0,0,0,.12). - Добавьте
border-radius— тень должна повторять скругление. - На
:hoverусильте тень и добавьтеtransition. - Проверьте: тень не «обрезана» родителем, у которого стоит
overflow: hidden.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Тень обрезана | у родителя overflow: hidden |
убрать overflow или добавить padding родителю |
| Тень «грязная», чёрная | непрозрачный цвет | использовать rgba(0,0,0,.12) |
| Тень «дрожит» при hover | нет transition |
добавить transition: box-shadow .2s |
| Тени нет | опечатка в свойстве или цвет без alpha | проверить в DevTools |
Проверьте себя
inset в box-shadow?
Вопросы и ответы
box-shadow повторяет прямоугольник блока. drop-shadow повторяет силуэт элемента — нужен для PNG с прозрачностью и иконок сложной формы.
Сколько угодно — они перечисляются через запятую. Обычно хватает двух: контактная и дальняя.
Чаще всего её обрезает родитель с overflow: hidden или у элемента нет фона/границ, чтобы тень была заметна. Проверьте в DevTools.
Почти нет, пока тень не анимируется на большом числе элементов. Анимируйте box-shadow умеренно и не на сотнях карточек сразу.
Итоги
- Порядок значений: X, Y, blur, spread, цвет.
- Цвет — полупрозрачный чёрный, сдвиг по Y — вниз.
inset— внутренняя тень, несколько теней — через запятую.- Всегда проверяйте, что тень не обрезана родителем.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.