CSS Box Shadow Generator

Design beautiful box shadows visually with live preview. Adjust offsets, blur, spread and color — then copy your CSS.

Colors
#000000
#ffffff
#f1f5f9
Generated CSS
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.20);

What is CSS Box Shadow Generator?

The CSS Box Shadow Generator lets you visually design box-shadow effects for web elements. Adjust X/Y offsets, blur radius, spread and opacity with sliders, pick any color, and see the result instantly in the live preview. When you're happy, copy the generated CSS or download it as a .css file.

How to Use This Tool

  1. Use the sliders on the left to set offset, blur, spread and opacity.
  2. Pick a shadow color and background color using the color pickers.
  3. Enable Inset to create an inner shadow.
  4. Click Copy CSS to copy the code, or Download .css to save the file.

Frequently Asked Questions