CSS Box Shadow Generator

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Background

Box color

Drop Shadow

Inset

X Offset: 4px

Y Offset: 4px

Blur: 10px

Spread: 0px

Color

Last updated: 2026 · Free online tool

What is CSS Box Shadow Generator?

Free online visual editor to create CSS box-shadow and copy the code

1
Select Preset — Start quickly with a preset button.
2
Adjust Sliders — Adjust the shadow using X/Y offset, blur, and spread sliders.
3
Preview — Check the result in real-time in the preview above.
4
Copy CSS — Use the copy button to get the box-shadow CSS.

Yes, use the 'Add Shadow' button to layer multiple shadows.

Yes, enable the Inset checkbox on each shadow to create an inner shadow.

Five presets are provided: Subtle, Medium, Large, Inset, and Double.

Yes, you can directly enter rgba(0,0,0,0.15) format in the color input field.

No. All calculations are done in the browser.