Box Shadow Generator

About the Box Shadow Generator

A CSS box-shadow generator with a live preview. Adjust the offset, blur, spread, and colour, then copy the CSS.

How to use the Box Shadow Generator

1. Set the horizontal and vertical offset.
2. Set the blur, the spread, and the colour.
3. Copy the box-shadow CSS.

What to check

A large blur on every card can make a page feel slow on a low-power phone. Use a lighter shadow if you repeat it.

Can I make an inset shadow?

Use the inset control if the tool shows one, or add the word inset to the copied CSS.

Will the shadow look the same in every browser?

Current browsers support the standard box-shadow property this tool copies.