What properties can I adjust?

Horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and inset toggle.

Can I add multiple shadows?

Yes. Add multiple shadow layers for complex effects.

Positive spread makes the shadow larger than the element. Negative spread makes it smaller. Zero means the shadow is the same size as the element.

Create CSS box shadows with a visual editor. Adjust offset, blur, spread and color. Copy CSS instantly.

Shadow Layers

Layer 1

Inset

Offset X5px

Offset Y5px

Blur20px

Spread0px

Opacity25%

Color#000000

CSS Output

box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.25);

Presets

Create CSS box shadows with an interactive visual editor. Adjust offset, blur, spread, and color in real time. Copy the CSS code with one click.

Visual preview

See the shadow update in real time.

Multiple layers

Stack multiple shadows for depth effects.

Copy CSS

Copy the complete box-shadow property.