ПаветтаГенератор box-shadow
Тень редко бывает одна: убедительная глубина собирается из двух-трёх слоёв — короткого плотного и длинного мягкого. Инструмент даёт добавлять слои, двигать каждый отдельно и сразу видеть результат на карточке.
Предпросмотр
Слои тени
Готовый CSS
Разобрать чужую тень
Из чего собирается убедительная тень
Убедительная тень редко бывает одной. Глубина собирается из двух-трёх слоёв: короткого плотного у самого края, который отделяет карточку от фона, и длинного мягкого, который даёт ощущение высоты. Инструмент даёт добавлять слои, двигать каждый отдельно и сразу видеть результат на карточке.
У свойства пять частей: сдвиг по горизонтали и вертикали, размытие, растяжение и цвет. Ключевое слово inset переворачивает тень внутрь, и получается вдавленность. Сдвиг задаёт направление света: тень строго вниз читается как свет сверху, и это привычнее всего.
Прозрачность важнее цвета. Тень чёрным с непрозрачностью 0,08–0,15 выглядит естественно почти на любом фоне, сплошной серый смотрится грязно. На цветных подложках тень берут того же тона, что фон, только темнее — так она не выглядит наклейкой.
| Часть записи | Что задаёт | Типичное |
|---|---|---|
| offset-x | Сдвиг вбок | 0 |
| offset-y | Сдвиг вниз | 2–12px |
| blur | Размытие | 4–30px |
| spread | Растяжение | −4…0 |
| color | Цвет и прозрачность | rgba(0,0,0,.1) |
От высокой печати до материального дизайна
Тень как приём пришла из печати. В высокой печати литеры вдавливали рельеф в бумагу, и буквы получали настоящий физический край. Литографы XIX века рисовали падающие тени у заголовков вручную, чтобы вывеска читалась издалека.
В интерфейсах тень стала языком глубины в девяностые: кнопки Windows и Mac рисовались с рельефом из светлой и тёмной кромки, и по нему сразу читалось, нажата кнопка или нет. Затем пришёл плоский дизайн и почти отменил тени, оставив цвет и типографику.
Возврат случился в 2014 году с материальным дизайном Google: интерфейс снова получил слои, у каждого своя высота, и тень стала обозначать именно её. Оттуда пошла привычка держать набор из нескольких уровней тени — от единицы до двадцати четырёх — и назначать их элементам по важности. Свойство поддерживает список теней через запятую с самого начала, и в наборах компонентов принято держать готовую лесенку из нескольких уровней вместо разовых значений.
Как задать высоту и не расплодить стили
Начните с одного слоя: сдвиг вниз на несколько пикселей, размытие втрое больше сдвига, чёрный с прозрачностью около десяти процентов. Добавьте второй слой с большим размытием и меньшей непрозрачностью, если нужна большая высота. Отрицательное растяжение подтягивает тень под карточку и убирает ореол по краям.
Держите на сайте два-три уровня тени и пользуйтесь ими последовательно: карточка, всплывающее меню, модальное окно. Когда каждый элемент получает собственную тень, интерфейс рассыпается. Тень для текста соберёт генератор text-shadow, а эффект матового стекла — генератор glassmorphism. Тень с нулевым размытием и небольшим растяжением работает как рамка, которая не влияет на размеры блока: удобно для состояния фокуса, где обычный border сдвинул бы содержимое на пиксель. Тени не влияют на размеры блока и не участвуют в раскладке: соседние элементы их не замечают, поэтому крупная мягкая тень может незаметно наехать на соседа.
Смотрите на тень в обеих темах. Тень, которая отлично читается на белом фоне, на тёмной подложке исчезает совсем: чёрное по чёрному не видно. В тёмной теме глубину обычно задают более светлой заливкой самой карточки, а тень оставляют для всплывающих слоёв, где нужен явный отрыв от подложки.
| Частей в записи | пять |
| Тень внутрь | inset |
| Слоёв для глубины | 2–3 |
| Непрозрачность | 0,08–0,15 |
| Размытие к сдвигу | примерно втрое |
| Растяжение | обычно отрицательное |
| Материальный дизайн | 2014 |
| Уровней в системе | 2–3 достаточно |
Как пользоваться
Все пять параметров под рукой: смещение по горизонтали и вертикали, размытие, растяжение и цвет с прозрачностью. Переключатель inset делает тень внутренней — так рисуют вдавленные поля и рамки. Готовое свойство лежит под предпросмотром, а чужую тень можно вставить в поле разбора и доработать.
- Начните со смещения вниз и размытия примерно вдвое больше смещения — это даёт естественную тень.
- Короткий и плотный слой у самого края делает границу чёткой, длинный и мягкий — глубину.
- Тень почти никогда не бывает чёрной: 10–20% чёрного выглядит правдоподобнее сплошного.
- Готовое свойство под предпросмотром, слои перечислены через запятую.
Частые вопросы
Что означают четыре числа в box-shadow
По порядку: смещение по горизонтали, смещение по вертикали, радиус размытия и растяжение. Первые два двигают тень, третье размывает края, четвёртое раздувает или сжимает саму тень до размытия. Третье и четвёртое необязательны: тень с двумя числами будет резкой копией блока.
Чем box-shadow отличается от filter: drop-shadow
box-shadow повторяет прямоугольник блока вместе со скруглением, даже если внутри прозрачная картинка. drop-shadow обводит непрозрачные пиксели содержимого, поэтому тень от PNG с вырезанным фоном получится по контуру объекта. Для карточек и кнопок нужен box-shadow, для логотипов с прозрачностью — drop-shadow.
Почему тень выглядит грязной
Обычно из-за сплошного чёрного. Чистый чёрный с большой непрозрачностью гасит цвет под собой и даёт серый налёт. Тень естественнее, когда она полупрозрачная и слегка окрашена в тон фона или самого элемента: например, синеватая под синей кнопкой.
Сколько слоёв имеет смысл
Два-три. Первый — короткий и плотный, отвечает за границу; второй — длинный и мягкий, за глубину; третий добавляют для очень выпуклых элементов. Больше четырёх слоёв заметно грузят отрисовку при анимации и почти не меняют вид.
Что делает inset
Разворачивает тень внутрь: она рисуется от краёв блока к центру. Так делают вдавленные поля ввода, внутренние рамки и подсветку по краю. Внутреннюю и внешнюю тень можно смешивать в одном свойстве — просто перечислите слои через запятую.
Можно ли анимировать тень
Технически да, но плавность страдает: браузер пересчитывает размытие на каждом кадре. Приём быстрее — держать готовую тень на псевдоэлементе и анимировать его непрозрачность: размытие считается один раз, а меняется только альфа.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Тень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор glassmorphismЭффект матового стекла на CSS: размытие фона, прозрачность, рамка и тень. С проверкой читаемости и запасным вариантом.
ОткрытьКонвертер CSS-единицpx в rem, em, pt, проценты, vw и vh при своём базовом размере шрифта и вьюпорте; таблица типовых размеров и генератор clamp() для плавного шрифта.
ОткрытьГенератор CSS-анимацииБольше двадцати эффектов появления, внимания и движения. Выдаёт и правило keyframes, и свойство animation целиком.
ОткрытьГенератор CSS filterРазмытие, яркость, контраст, насыщенность, оттенок, сепия и тень по контуру. Предпросмотр на своей картинке, файл остаётся в браузере.
ОткрытьГенератор border-radiusСкругление каждого угла отдельно, эллиптические радиусы через слэш, проценты и пиксели. Собирает самую короткую запись из возможных.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.