DESIGN TOOL

CSS Box Shadow Generator

Design a box shadow visually and copy the ready-to-use CSS.

Horizontal offset: 10px

Vertical offset: 10px

Blur radius: 20px

Spread: 0px

Shadow color

Opacity: 25%

Inset (inner shadow)

CSS

About this tool

Adjust the sliders to design a CSS box-shadow visually, with a live preview, then copy the generated declaration straight into your stylesheet.

What does "spread" do?: Positive spread expands the shadow's size beyond the element's edges in every direction; negative spread shrinks it, which is useful for tighter, more subtle shadows.
What's the difference with "inset" checked?: A normal shadow appears to sit behind the element and cast light outward. An inset shadow renders inside the element's boundary instead, creating a "pressed in" or carved appearance.
Can I layer multiple shadows?: This generator produces a single shadow layer. To combine several, copy each one you design here and join them with commas in your CSS — box-shadow accepts a comma-separated list.