CSS Box-Shadow Generator

The box-shadow property adds a shadow around an element’s box. Each shadow is defined by an offset-x, offset-y, an optional blur radius and spread radius, a color, and an optional inset keyword to draw the shadow inside the box instead of outside.

In order they are: horizontal offset (positive moves the shadow right), vertical offset (positive moves it down), blur radius (larger is softer and more diffuse; 0 is a sharp edge), and spread radius (positive grows the shadow in every direction, negative shrinks it).

The inset keyword draws the shadow inside the element’s border box, which makes the box look pressed in or recessed. Without it, the shadow is drawn outside the box, so the element appears to float above the page.

Shadows look best when they are slightly transparent so the background shows through. The generator combines your chosen color with the opacity slider into an rgba() value, for example rgba(0,0,0,0.3) for black at 30% opacity.

Yes. Use Add shadow to stack several layers, separated by commas. Browsers paint them in order, so the first shadow in the list sits on top. Combining a soft wide shadow with a tighter dark one creates realistic depth.

No. The generator runs entirely in your browser — nothing is uploaded to a server and nothing is stored.