Свойство CSS box-shadow рисует одну или несколько теней вокруг элемента, не меняя раскладку документа. ShadowStack показывает только значения, которые входят в скопированное свойство, поэтому предпросмотр браузера и код можно сопоставить напрямую. Каждый слой сохраняет явный порядок, состояние inset, четыре длины в пикселях, HEX-цвет и непрозрачность.

Сочетайте контактную и окружающую тень

Задайте первый слой 0 px, 4 px, 10 px, -4 px с цветом #0F172A и непрозрачностью 30 процентов. Добавьте второй: 0 px, 18 px, 36 px, -12 px с тем же цветом и 18 процентами. Оставьте меньшую контактную тень первой, чтобы она рисовалась над широкой окружающей. Два явных слоя разделяют чёткость у края и дальнюю мягкость, поэтому их проще настраивать, чем одно экстремальное размытие. Переместите второй слой вверх и обратно, убедитесь, что меняется только порядок, и скопируйте итоговое свойство через запятую.

Сокращайте слои перед добавлением новых

Оцените два слоя на реальной поверхности и рядом с соседними компонентами до добавления следующего. Удалите слой, вклад которого не виден при обычном размере. Больше слоёв не создают автоматически более реалистичную глубину, но увеличивают стоимость проверки и поддержки. Согласуйте смещения с выбранным визуальным направлением, используйте непрозрачность вместо чрезмерно чёрного цвета и храните принятое свойство рядом с компонентом-владельцем.

Проверьте CSS в реальном компоненте

ShadowStack показывает скопированное свойство движком текущего браузера, но предпросмотр не подтверждает совместимость или доступность. Вставьте CSS в реальный компонент и проверьте все поддерживаемые браузеры, адаптивные ширины, фоны и контейнеры с overflow. Широкое размытие может обрезаться родителем, а внутренняя тень — перекрывать содержимое или индикатор фокуса. Проверьте клавиатурный фокус во всех состояниях, измерьте контраст текста и элементов отдельным инструментом и оставьте границу или другое различие, если интерфейсу нужны ясные контуры. Капсула не хранит пресеты или историю, поэтому сохраните принятый CSS в своём файле под контролем версий до перезагрузки.