wid9et
Sign In

CSS Box Shadow Generator

Design a CSS box shadow visually, preview it live and copy the finished declaration.

box-shadow: 0px 12px 28px 0px rgba(15, 23, 42, 0.24);

Explore more Developer Tools →Build your own widget - free →

How to use CSS Box Shadow Generator

  1. 1Adjust the horizontal offset, vertical offset, blur, spread and opacity values.
  2. 2Choose the shadow, box and preview background colours, and enable inset if needed.
  3. 3Preview the effect, then copy or share the generated CSS declaration.

Useful tips

  • •Use a low opacity and a larger blur radius for a softer, more natural shadow.
  • •Negative horizontal or vertical offsets move the shadow left or upward.
  • •Try an inset shadow for pressed controls, wells and recessed panels.

Frequently asked questions

What CSS does this generator create?

It creates a standard box-shadow declaration using pixel offsets and an RGBA colour.

Can I create an inset shadow?

Yes. Enable Use an inset shadow to add the inset keyword to the generated declaration.

Why use RGBA for the shadow colour?

RGBA keeps the chosen colour and opacity together so the copied declaration is ready to paste.

Does the tool upload my settings?

No. The preview and CSS are generated directly in your browser.