CSS Box Shadow Generator

Create CSS box shadows with sliders and copy the code.

About this tool

Adjust offset, blur, spread, color and opacity while watching a live preview. Copy the CSS when it looks right.

How to use CSS Box Shadow Generator

  1. Move the sliders.
  2. Choose the color and opacity.
  3. Copy the box-shadow CSS.

Frequently asked questions

What does spread do?

Spread grows or shrinks the shadow size before blur is applied.

What is an inset shadow?

It draws the shadow inside the element instead of outside.