CSS Box Shadow Generator

Create box-shadow CSS with live preview.

Developer

Adjust horizontal and vertical offset, blur, spread, and color to build a box-shadow. Preview updates live. Copy the CSS. Runs in your browser.

box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);

About CSS Box Shadow Generator

Box-shadow adds a shadow behind an element. This tool lets you set the horizontal and vertical offset, blur radius, spread, and color (with optional inset). The preview and CSS update as you change values. Copy the result into your stylesheet.

How to use

  1. Adjust offset, blur, spread, and color. Check Inset if you want an inner shadow.
  2. Copy the generated CSS and paste it into your project.

Frequently Asked Questions

What is inset?
Inset draws the shadow inside the element instead of outside. Useful for pressed or recessed effects.
Is my input sent to a server?
No. The CSS is built in your browser. Nothing is uploaded.
Can I use multiple shadows?
This tool generates one shadow. For multiple shadows, copy the output and add more comma-separated values to box-shadow.