CSS Depth Lab
layer stack
Build box-shadow stacks for soft cards, focus rings, inset wells, and glow effects.
01 - Build
Tune the surface, radius, and every shadow layer while the CSS updates live.
box-shadow playgroundx offset · y offset · blur · spread · color · insetx offset · y offset · blur · spread · color · inset
box-shadow: 0px 20px 50px -24px rgba(255, 77, 109, 0.55),
0px 0px 32px -8px rgba(108, 99, 255, 0.35);
border-radius: 18px;
shadow-[0px_20px_50px_-24px_rgba(255,_77,_109,_0.55),_0px_0px_32px_-8px_rgba(108,_99,_255,_0.35)]
02 - Layers
Stack multiple shadows for believable depth, glow, crisp rings, or inner bevels.
0px 20px 50px -24px rgba(255, 77, 109, 0.55)
0px 0px 32px -8px rgba(108, 99, 255, 0.35)
03 - Presets
Start from common depth and glow patterns, then adjust the generated layers.
04 - Glow
Glow is just a shadow with low offsets, high blur, color, and often multiple layers.
.button {
box-shadow: 0px 20px 50px -24px rgba(255, 77, 109, 0.55),
0px 0px 32px -8px rgba(108, 99, 255, 0.35);
}
05 - Reference
The box-shadow order is compact, but every value has a clear job.
Anatomy
box-shadow: inset? x y blur spread color
Depth
Use larger y offsets, blur, and negative spread for soft elevation.
Glow
Use x/y near zero, high blur, bright color, and multiple layers.
Performance
Very large blurred shadows can be expensive during animation.