Тень блока в CSS
Адаптивная вёрстка научила вас когда менять layout. Тень блока открывает раздел Effects & Motion: мягкая глубина под карточкой, «вдавленное» поле или лёгкий подъём кнопки — всё одним свойством box-shadow, без изменения размеров box model.
Части тени
📊 Части box-shadow одним взглядом
| Часть | Повседневная роль |
|---|---|
offset-x / offset-y |
Куда смещена тень относительно коробки (плюс = вправо / вниз) |
blur-radius |
Мягкость края — 0 жёсткий; больше значение — сильнее «размытое» перо |
spread-radius |
Необязательно: чуть увеличить или сжать силуэт тени до размытия |
color |
Обычно rgba(...), чтобы тень оставалась полупрозрачной |
inset |
Необязательное ключевое слово — рисует тень внутри коробки |
| Несколько списков | Тени через запятую накладываются (далёкая мягкая + ближняя чёткая) |
Думайте о высоте, а не о декоративном спаме. Один мягкий слой под карточкой чаще лучше трёх громких контуров.
Спокойный внешний подъём
Типичный рецепт карточки: небольшое смещение вниз, умеренный blur, почти без spread и полупрозрачный чёрный (или серый). Тень должна намекать на свет сверху — а не выглядеть как чёрный прямоугольник, приклеенный сзади.
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
Положительный offset-y опускает тень под коробку. Держите alpha низкой — текст и соседи останутся читаемыми.
inset — глубина внутри коробки
Ключевое слово inset рисует тень внутрь. Удобно для «колодцев», нажатых кнопок или полей ввода, которые должны казаться чуть утопленными.
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset не заменяет border или padding — он лишь меняет ощущение света внутри окрашенной области.
Многослойные тени
Перечислите несколько теней через запятую. Далёкий мягкий слой плюс ближний, более плотный часто читается как естественный подъём без тяжёлого контура.
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
Порядок в списке — порядок отрисовки; обе тени всё равно принадлежат одному элементу. Два тихих слоя лучше одной непрозрачной кляксы.
Сброс, акцент и фокус на коробке
Задайте box-shadow: none, когда состояние снова должно быть плоским. Цветная тень может поддержать акцент бренда — blur всё равно мягкий, alpha скромная. Помните: глифы — через text-shadow (текстовые эффекты); коробки — через box-shadow.
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
Попробуйте сами
- Дайте белой карточке одну мягкую внешнюю тень (
0по x, небольшой y, blur около 1rem, низкая alpha). - Добавьте
inset-тень полю поиска, чтобы оно слегка «утонуло». - Обновите одну панель до двухслойного стека (ближний + дальний).
- Найдите в учебном файле сплошной чёрный
box-shadowи смягчите его черезrgba. - Убедитесь, что свечение заголовка идёт через
text-shadow, а неbox-shadow.
Частые ошибки
- Полностью непрозрачные чёрные тени, похожие на вторую коробку
- Путать blur и spread как одну и ту же ручку
- Вешать
box-shadowна текст, когда нуженtext-shadow - Тенить каждый пункт списка, ссылку и иконку, пока страница не затуманится
- Забывать
inset, когда дизайну нужен «нажатый» или полый вид
Кратко
- У
box-shadow: offset, blur, необязательный spread, цвет и необязательныйinset - Мягкие полупрозрачные внешние тени дают спокойный подъём
- Складывайте слои через запятую; сбрасывайте в плоское состояние через
none - Коробки ≠ глифы —
text-shadowоставьте для текста - Дальше в Effects & Motion: Transitions
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху