🌫️

CSS Box Shadow Generator

Build CSS box-shadow values visually. Adjust offset, blur, spread, color, and opacity with a live preview. Stack multiple layers and copy the final CSS.

Generator Tools Runs locally No data sent
cssbox-shadowgeneratordesign
Layers
X Offset4px
Y Offset4px
Blur8px
Spread0px
%
Inset

What is CSS Box Shadow Generator?

CSS Box Shadow Generator lets you visually build box-shadow values and instantly copy the CSS. Adjust offsets, blur, spread, color, and opacity with live preview.

How to Use the Box Shadow Generator

  1. Adjust X/Y Offset, Blur, and Spread sliders.
  2. Pick a shadow color and set opacity.
  3. Toggle Inset for an inner shadow effect.
  4. Add more layers for complex shadows.
  5. Copy the CSS and paste into your project.

Related Tools

🌈
CSS Gradient Generator
Build linear and radial CSS gradients
🖌️
Color Picker
Pick and convert colors between formats
🎨
CSS Formatter
Format and beautify CSS code
Learn More▾
Box Shadow Parameters
  • X/Y Offset —shifts the shadow horizontally and vertically
  • Blur —how soft/blurred the shadow edge is
  • Spread —expands or contracts the shadow size
  • Inset —renders shadow inside the element
Frequently Asked Questions
Can I add multiple shadows?

Yes. Click 'Add Layer' to stack multiple box-shadow values, combined with commas in the output CSS.

How do I use the generated CSS?

Click 'Copy CSS' and paste the box-shadow property directly into your CSS file or style block.