Digital Drive HQ

CSS Box Shadow Generator

Design CSS box shadows with a live preview.

Free · No sign-up · Works in your browser

CSS
box-shadow: 0px 10px 25px -5px rgba(26, 26, 46, 0.25);

About the CSS Box Shadow Generator

Free CSS box-shadow generator — adjust offset, blur, spread, and color, preview live, and copy the CSS.

How to use the CSS Box Shadow Generator

  1. 1Adjust offset, blur, spread, and color.
  2. 2Preview the shadow live.
  3. 3Copy the box-shadow CSS.

Frequently asked questions

What does spread do?

Spread grows (positive) or shrinks (negative) the shadow before blur is applied, changing how far it extends.

How do I make an inset shadow?

Enable the inset option to render the shadow inside the element instead of outside.

Related tools