The CSS box-shadow property paints one or more shadows around an element without changing document layout. ShadowStack exposes only values that appear in the copied declaration, so the browser preview and source remain directly comparable. Each layer keeps its explicit paint order, inset state, four pixel lengths, hexadecimal colour and opacity.
Inset changes the painted region, not the values
An outer shadow is painted outside the element’s border box and can suggest elevation. Adding inset paints the shadow inside the border, where it can suggest a pressed surface, recess or edge shading. ShadowStack places inset first in its canonical layer but leaves X, Y, blur, spread, colour and opacity untouched when the checkbox changes. Because the geometry is different, the same numbers can look much stronger inside than outside. Start with lower opacity and moderate blur, then inspect content padding and borders in the real component.
Mix inset and outer layers deliberately
One declaration may contain both outer and inset layers. Their list order remains explicit, but they occupy different painted regions and should not be treated as interchangeable depth steps. Use tabs to select the intended layer before editing, and read the inset label on every tab before reordering. A common restrained pattern is one subtle outer layer for separation plus one low-opacity inset highlight or shade for surface detail. Avoid relying on either shadow as the only focus, error or selection indicator because shadows can disappear against different backgrounds or under high-contrast settings.
Verify the CSS in its real component
ShadowStack renders the copied declaration with the current browser engine, but the preview is not a compatibility or accessibility certificate. Paste the property into the intended component and test every supported browser, responsive width, background and overflow container. A broad blur may be clipped by an ancestor and an inset shadow may cover content or focus indicators. Inspect keyboard focus at every state, measure text and control contrast with a dedicated tool, and retain a usable border or other non-shadow distinction when the interface depends on clear boundaries. The capsule stores no presets or history, so keep accepted CSS in your own source-controlled stylesheet before reloading.