What do offset, blur, and spread each do?

Offset X and Y move the shadow horizontally and vertically from the element. Blur softens the shadow's edge — higher values spread it out more. Spread grows or shrinks the shadow's size independently of the element, before blur is applied.

What's the difference between a regular and an inset shadow?

A regular box-shadow falls outside the element, like a drop shadow. An inset shadow is drawn inside the element's border, creating a pressed-in or carved-out look.

Can I layer multiple shadows on one element?

Yes. CSS box-shadow accepts a comma-separated list of shadows on the same element — click "+ Add shadow" to add up to 5 layers, which is how effects like soft ambient shadows combined with a sharp contact shadow are built.

Is anything uploaded or saved?

No. The shadow is calculated and rendered entirely in your browser with JavaScript — nothing is uploaded, logged, or stored.

CSS BOX SHADOW GENERATOR

Build single or layered box-shadows with a live preview — calculated right here in your browser.

Shadows

Shadow 1

Inset

Blur

Spread

ColorOpacity20%

Presets

CSS

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);

How to build a box shadow

1
Adjust the offset X/Y, blur, and spread sliders to shape the shadow.
2
Pick a color and set its opacity.
3
Toggle Inset for an inner shadow instead of a drop shadow.
4
Click + Add shadow to layer multiple shadows on the same element.
5
Pick a preset for a quick starting point, then click Copy to grab the CSS.

Questions

What do offset, blur, and spread each do?: Offset X and Y move the shadow horizontally and vertically from the element. Blur softens the shadow's edge — higher values spread it out more. Spread grows or shrinks the shadow's size independently of the element, before blur is applied.
What's the difference between a regular and an inset shadow?: A regular box-shadow falls outside the element, like a drop shadow. An inset shadow is drawn inside the element's border, creating a pressed-in or carved-out look.
Can I layer multiple shadows on one element?: Yes. CSS box-shadow accepts a comma-separated list of shadows on the same element — click "+ Add shadow" to add up to 5 layers, which is how effects like soft ambient shadows combined with a sharp contact shadow are built.
Is anything uploaded or saved?: No. The shadow is calculated and rendered entirely in your browser with JavaScript — nothing is uploaded, logged, or stored.