What is CSS box-shadow?

CSS box-shadow adds shadow effects around an element's frame. You can set multiple properties including horizontal offset, vertical offset, blur radius, spread radius, and color.

Can I add multiple shadows to one element?

Yes! This generator lets you add multiple shadow layers. Layered shadows create more realistic depth effects commonly used in modern UI design.

What is an inset shadow?

An inset shadow appears inside the element rather than outside, creating a pressed or sunken effect. Toggle the 'Inset' option in this generator to see the difference.

CSS Box Shadow Generator

Create beautiful box shadows with live preview

Shadow Properties

Horizontal 10px

Vertical 10px

Blur 20px

Spread 0px

Color

Opacity 25%

Inset Shadow

CSS Box Shadow Generator

Shadow Properties

Presets

CSS Code