CSS Box Shadow Generator

Create CSS box shadows visually with live preview.

box-shadow: 5px 5px 15px 0px #00000040;

What is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element. You can set multiple values including horizontal offset, vertical offset, blur radius, spread radius, and color. The inset keyword moves the shadow inside the element, creating an inner shadow effect.

How to Use

Adjust the sliders to control offset, blur, and spread. Pick a shadow color using the color picker. Toggle the inset option for inner shadows. Try the presets for common shadow styles, then copy the generated CSS code for your project.