Most box-shadow recipes start with a single blurry layer and stop there. Real UI shadows stack two or three carefully weighted layers: a tight shadow close to the element for the contact edge, a diffuse ambient layer for depth, and sometimes a subtle inset highlight on the top face. This generator lets you build that stack visually so you can see the result before you paste the code.

Each layer has its own offset X, offset Y, blur radius, spread radius, color and opacity controls. The opacity slider writes a rgba() value with the correct alpha channel rather than a hex color with full opacity. That is what makes semi-transparent shadows blend believably against colored or patterned backgrounds. Toggle the eye icon to hide a layer without removing it, or flip the Inset switch to turn an outer elevation shadow into a pressed-button or inner-glow effect.

How to Use the Multi-Layer Builder

1. The generator opens pre-loaded with a subtle card elevation shadow: 0px 4px 12px 0px rgba(28,25,23,0.15). The preview box on the right shows the result immediately without pressing any button.
2. Drag the Offset Y and Blur Radius sliders to change the shadow height and softness. A high Y with a large blur reads as distant ambient light; a low Y with a small blur reads as a close, direct source.
3. Press Add Layer to stack a second shadow. Setting the second layer to a lower blur and a slightly lower opacity adds the contact-edge detail that makes the shadow feel grounded rather than floating.
4. Click Load Sample to cycle through four preset shadow styles: elevation, hard retro offset, soft glow and inset press. Each replaces the current layers so you can inspect the code they produce.
5. Press Copy CSS to get the full .your-element { box-shadow: … } block, or Copy Value for the bare property value when you only need to update an existing rule.

What Each Control Does

The Opacity slider maps 0 to 100 percent to the alpha channel of an rgba() color. At 100 percent the shadow is fully opaque; at 0 percent it is invisible. The generated value is always rgba(), never a bare hex, because hex colors carry no alpha channel. That distinction catches developers who set a semi-transparent shadow in the generator and wonder why it looks different after pasting into a file that previously used hex.

The Inset toggle prepends the inset keyword to the layer, turning it from an outer drop shadow into an inner shadow. Use it with a low offset and a small blur to simulate a depressed button, or with zero offset and a medium blur to create an inner glow. The layer list shows a swatch of the layer color so multi-layer stacks remain readable at a glance.

Edge Cases and Tricky Inputs

CSS renders multiple box-shadows in declaration order: the first layer in the list sits on top, closest to the element surface, and later layers render beneath it. Use the up and down arrows in the layer list to reorder without retyping. A common pattern: put the tight contact-edge shadow first and the wide ambient layer second so the edge detail paints over the ambient spread.

A positive spread expands the shadow beyond the element size; a negative spread contracts it. The most useful negative-spread pattern is a near-zero blur with a spread of negative 2 to negative 4: this carves the shadow inside the element footprint, creating a tight underline shadow that does not bleed horizontally. Spread below negative 40 or above 40 produces no visible change at normal element sizes.