About this tool
CSS box-shadow draws one or more shadows around an element's frame. Each shadow is a set of values: an optional inset keyword, horizontal and vertical offsets, a blur radius, a spread radius, and a color. Multiple shadows are comma-separated and painted back-to-front, so the first one in the list sits on top. Layering several low-opacity shadows is how realistic elevation, soft ambient light, and inner glows are built — a single shadow rarely looks natural.
Use it to design card and modal elevation, dial in focus-ring and inner-glow effects, recreate Material-style depth with stacked layers, or quickly prototype a hover state before committing it to your stylesheet. Pick a preset to start, adjust each layer's sliders, toggle inset for recessed shadows, and paste the generated rule straight into your CSS or a Tailwind arbitrary value.
Colors are emitted as rgba() so the opacity slider maps directly to the alpha channel — the underlying hex stays untouched, which keeps the value easy to tweak by hand later.
Frequently asked questions
How do I create a layered (multi-layer) box-shadow?
Provide several shadow definitions separated by commas in a single box-shadow declaration. Each layer renders independently and stacks back-to-front, with the first listed shadow drawn on top; combining a few low-opacity layers produces softer, more realistic depth than one shadow.
What is the difference between blur and spread in box-shadow?
Blur is the fourth value and controls how soft the shadow's edge is — higher values feather it out. Spread is the optional fifth value and grows (positive) or shrinks (negative) the shadow's size before the blur is applied, so a negative spread tightens the shadow against the element.
What does the inset keyword do in box-shadow?
Adding inset draws the shadow inside the element's box instead of outside it, creating a recessed or inner-glow effect. Without inset, the shadow is painted outward as a normal drop shadow.