CSS Box-Shadow Generator
Adjust the X/Y offset, blur radius, spread radius, color, and inset for each shadow layer — the preview and the generated CSS update instantly. You can add or remove between 1 and 6 shadow layers; clicking "Add shadow" inserts a new layer with progressively larger offset and blur, making it easy to build a layered, dimensional shadow. The generated box-shadow declaration can be copied to the clipboard with one click. Pairs well with the CSS Border-Radius Generator for rounded, shadowed cards.
🔒 Runs in your browser · Your data is never sent to a server
Shadow layers
You can have between 1 and 6 shadow layers.
Preview
Notes
- Because `<input type="color">` only accepts 6-digit hex colors, it has no alpha channel. For a semi-transparent shadow (`rgba()`/`hsla()`), edit the color in the generated CSS by hand.
- A negative spread radius shrinks the shadow smaller than the blur radius would otherwise produce.
- Enabling inset draws the shadow inside the element’s edge instead of outside it.
- When you stack multiple shadow layers, the CSS spec renders the layer listed first on top of the others.
Glossary
box-shadow
The CSS property that adds a shadow to an element, written as `box-shadow: X Y blur spread color;`. Multiple shadows can be layered by separating them with commas.
Offset
How far the shadow is shifted from the element. A positive X moves it right (negative left), and a positive Y moves it down (negative up).
Blur radius
How soft the shadow's edge is. A larger value spreads the edge out more smoothly; 0 produces a sharp-edged shadow.
Spread radius
How much the shadow's size is expanded or contracted. A positive value makes the shadow larger than the element; a negative value makes it smaller.
Inset
The `inset` keyword draws the shadow inside the element’s edge instead of outside it, producing a carved-in look.
FAQ
What does "inset" do?
With inset, the shadow is drawn inside the element instead of outside, creating a recessed look. It is often used for input fields and pressed buttons.
Can I stack multiple shadows?
Yes. You can add up to 6 shadow layers. Layering several soft shadows usually looks more natural than one heavy shadow.
What is the difference between blur radius and spread radius?
Blur radius controls how soft the shadow edge is. Spread radius grows or shrinks the shadow itself; a negative value makes it smaller.
Share this page