Make Tools
💨

CSS Box Shadow Generator

Generate CSS box shadows visually. Adjust X/Y offset, blur, spread, color, and opacity with live preview.

Preview
Click to copy
box-shadow: 5px 5px 15px 0px rgba(26,26,46,0.2);

Frequently Asked Questions

Can I create inset shadows?
Yes, toggle the Inset checkbox to create inner shadows instead of outer shadows.

Related Tools

🎨Color Converter (HEX, RGB, HSL)🎨CSS Formatter & Minifier🌈CSS Gradient Generator

How to Use

  1. 1 Adjust X offset, Y offset, blur radius, and spread radius with the sliders.
  2. 2 Pick a shadow color and set its opacity.
  3. 3 Toggle **Inset** for inner shadows instead of drop shadows.
  4. 4 Copy the generated CSS box-shadow property value.