box-shadow добавляет элементу тень: сдвиг по горизонтали и вертикали, размытие края (blur), рост или сжатие самой тени (spread) и цвет. По умолчанию тени нет вообще (значение none) - без явного box-shadow элемент выглядит плоским.
В этом уроке
Попробуй прямо сейчас: увеличь blur-radius (третье число) до 30px - тень станет заметно более размытой и мягкой.
Как задать box-shadow: сдвиг, размытие (blur) и растяжение (spread)
Полный набор значений идёт в таком порядке: offset-x offset-y blur-radius spread-radius color. Обязательны только offset-x и offset-y (сдвиг тени по горизонтали и вертикали) - без них тень вообще не появится, даже если задан цвет. blur-radius (необязателен, по умолчанию 0) размывает край тени - чем больше значение, тем мягче и шире растушёвка. spread-radius (тоже необязателен, по умолчанию 0) работает независимо от blur - увеличивает или уменьшает саму тень со всех сторон, как будто у блока стала другая ширина и высота. У blur-radius отрицательные значения запрещены спецификацией и просто игнорируются браузером, а вот spread-radius, наоборот, МОЖЕТ быть отрицательным - тогда тень становится меньше самого блока.
box-shadow: 4px 4px 10px 0 black; - сдвиг 4px/4px, размытие 10px, растяжение не задано (0 по умолчанию).
box-shadow: 4px 4px -10px black;, пытаясь "убрать" размытие отрицательным числом - blur-radius не может быть отрицательным, всё правило целиком будет проигнорировано.
Кстати, если тень в коде написана правильно, но на странице её всё равно не видно - дело часто не в самом box-shadow, а в overflow родителя: тень технически выходит за пределы границ блока, а overflow, отличный от visible, обрезает её точно так же, как и любое другое содержимое, которое не помещается.
Как задать несколько теней одному элементу сразу
Можно перечислить несколько теней через запятую - каждая описывается своим набором значений. Тени накладываются друг на друга в том же порядке, что и слои background-image из урока про фоновые изображения: ПЕРВАЯ тень в списке оказывается СВЕРХУ, а каждая следующая рисуется под предыдущими. Это удобно для многослойных эффектов - например, тонкая контрастная обводка первой тенью и мягкое размытое свечение второй.
box-shadow: 0 2px 4px black, 0 8px 16px gray; - две тени: резкая близко к блоку и более размытая дальше, обе видны одновременно.
box-shadow: 0 2px 4px black 0 8px 16px gray; без запятой между тенями - браузер попытается разобрать это как одну невалидную тень и проигнорирует всё правило.
Как сделать внутреннюю тень: ключевое слово inset
Ключевое слово inset (пишется первым, перед всеми числами) переворачивает тень внутрь элемента - вместо тени снаружи по краям появляется тень изнутри, будто поверхность блока слегка вдавлена. Середина блока при этом остаётся чистой, а снаружи блока никакой тени с inset уже не будет вообще - весь эффект целиком уходит внутрь.
box-shadow: inset 0 0 10px black; - тень видна изнутри у краёв блока, снаружи блока тени нет совсем.
box-shadow: 0 0 10px black inset; - у большинства браузеров сработает и так (inset не обязан идти первым по факту реализации), но по спецификации его место - перед числами, для читаемости лучше писать именно так.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Задают отрицательный blur-radius, пытаясь "убрать" размытие | Значение невалидно, всё правило box-shadow игнорируется целиком | Для чёткой тени без размытия использовать blur-radius: 0, а не отрицательное число |
| Путают blur-radius и spread-radius | Ожидаемый результат (растушёвка или изменение размера) не совпадает с реальным | Помнить: blur размывает край, spread меняет сам размер тени независимо от размытия |
| Не видят тень, хотя код правильный | У родителя задан overflow, отличный от visible - тень выходит за пределы блока и обрезается | Проверить overflow у родителя или увеличить его размеры/отступы |
| Забывают запятую между несколькими тенями | Браузер не может разобрать значение, вся тень пропадает | Разделять каждую тень запятой |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Простая тень со сдвигом | box-shadow: 4px 4px 8px black; |
| Без размытия, чёткий край | box-shadow: 4px 4px 0 black; |
| Увеличить/уменьшить саму тень | box-shadow: 0 0 0 10px black; (или -10px) |
| Несколько теней сразу | box-shadow: тень1, тень2; |
| Тень внутрь элемента | box-shadow: inset 0 0 10px black; |
| Без тени (по умолчанию) | box-shadow: none; |
Коротко: отвечаем на вопросы
Почему box-shadow не виден, хотя код написан правильно?
Самая частая причина - overflow, отличный от visible (hidden, auto или scroll), заданный у родителя элемента. Тень технически выходит за пределы границ блока, и такой родитель просто обрезает её вместе с любым другим содержимым, которое не помещается.
Чем отличается blur-radius от spread-radius?
blur-radius размывает край тени - чем больше значение, тем мягче и шире растушёвка, но общий размер тени по факту тоже увеличивается за счёт этой растушёвки. spread-radius работает иначе и независимо: он увеличивает или уменьшает саму тень со всех сторон, как будто у исходного блока стала другая ширина и высота, при этом край остаётся таким же резким или размытым, каким его сделал blur.
