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

Сопоставьте четыре длины без неоднозначности

После необязательного слова inset ShadowStack всегда пишет смещение X, смещение Y, радиус размытия и радиус расширения именно в таком порядке. Отрицательные смещения двигают тень влево или вверх, положительные — вправо или вниз. Размытие не бывает отрицательным. Отрицательное расширение сжимает форму до размытия, положительное увеличивает её. Каждая длина — целое значение в пикселях, включая ноль, поэтому код не зависит от пропущенных значений по умолчанию. Меняйте по одному полю и находите соответствующий токен до оценки результата.

Сохраняйте цвет и непрозрачность проверяемыми

Палитра задаёт строгий шестизначный sRGB-цвет в HEX. Непрозрачность остаётся отдельным целым процентом, поэтому прозрачность не меняет выбранный базовый цвет. В коде эти значения превращаются в современный синтаксис rgb(R G B / A): ноль и единица записываются точно, промежуточные проценты — десятичным числом максимум с двумя знаками. Стабильное преобразование даёт побайтно одинаковый CSS для одинакового ввода. Оно не выполняет управление цветом, прогноз смешивания, анализ контраста или преобразование в дизайн-токен.

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

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