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

Читайте первый слой как верхнюю тень

Список box-shadow через запятую упорядочен: первая тень рисуется поверх следующих. Это важно при пересечении непрозрачных или внутренних слоёв. Вкладки ShadowStack идут точно в том же порядке, что и скопированный CSS. Кнопка «Выше» меняет слой с предыдущим, «Ниже» — со следующим. Цвет, размытие и геометрия при этом не пересчитываются. Сравнивайте код после каждого перемещения; для управляемой глубины удобно поставить небольшой тёмный слой над более широким и светлым вместо одного огромного размытия.

Сохраняйте каждый слой явным и ограниченным

Генератор принимает от одного до восьми слоёв. Новый нейтральный внешний слой вставляется сразу после выбранного, поэтому его позиция предсказуема. Удаление останавливается на одном слое, и свойство остаётся корректным. У каждого слоя свои inset, смещения, размытие, расширение, цвет и непрозрачность; скрытого общего источника света или автоматического масштабирования нет. Если нужно больше восьми слоёв, упростите эффект или ведите итоговый CSS вручную: большой искусственный стек трудно проверять, и он может создавать лишнюю работу отрисовки.

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

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