Свойство CSS box-shadow рисует одну или несколько теней вокруг элемента, не меняя раскладку документа. ShadowStack показывает только значения, которые входят в скопированное свойство, поэтому предпросмотр браузера и код можно сопоставить напрямую. Каждый слой сохраняет явный порядок, состояние inset, четыре длины в пикселях, HEX-цвет и непрозрачность.
Используйте один точный внешний слой
Начните с исходного документа: X равен 0 px, Y — 12 px, размытие — 28 px, расширение — -8 px, цвет — #0F172A, непрозрачность — 28 процентов. Результат: box-shadow: 0px 12px 28px -8px rgb(15 23 42 / 0.28);. Отрицательное расширение сжимает форму до размытия и удерживает тёмную часть рядом с карточкой. Скопируйте свойство, проверьте его на реальном фоне карточки и меняйте по одному числу, если нужно меньше отделения или другое направление.
Проверяйте границу, а не только размытие
Мягкая тень не должна быть единственным признаком, отделяющим интерактивную карточку от фона. Проверьте карточку при обычном и увеличенном тексте, клавиатурном фокусе и высокой контрастности. Если граница теряется, добавьте явную рамку или различие поверхности в CSS компонента, а не делайте тень всё темнее. ShadowStack намеренно выводит только box-shadow, поэтому независимые решения остаются видимыми и проверяемыми в вашей таблице стилей.
Проверьте CSS в реальном компоненте
ShadowStack показывает скопированное свойство движком текущего браузера, но предпросмотр не подтверждает совместимость или доступность. Вставьте CSS в реальный компонент и проверьте все поддерживаемые браузеры, адаптивные ширины, фоны и контейнеры с overflow. Широкое размытие может обрезаться родителем, а внутренняя тень — перекрывать содержимое или индикатор фокуса. Проверьте клавиатурный фокус во всех состояниях, измерьте контраст текста и элементов отдельным инструментом и оставьте границу или другое различие, если интерфейсу нужны ясные контуры. Капсула не хранит пресеты или историю, поэтому сохраните принятый CSS в своём файле под контролем версий до перезагрузки.