Can I add multiple shadows?

Yes — click 'Add Shadow' to layer multiple shadows. Complex effects like neumorphism use 2 shadows.

What is an inset shadow?

An inset shadow appears inside the element rather than outside, creating a pressed or engraved effect.

Yes — box-shadow is supported in all modern browsers and IE9+. No prefixes needed.

Blur controls how soft/sharp the shadow edge is. Spread expands or contracts the shadow size before blurring.

Create CSS box shadows visually with live preview and copy-paste code. Works in your browser. Free, no signup.

No sign-up Batch convert 100% free

Layer 1

Inset

X Offset0px

Y Offset4px

Blur6px

Spread-1px

Color

BGBox

box-shadow: 0px 4px 6px -1px #00000026;

How useful is Box Shadow Generator?

Adjust the X offset, Y offset, blur, and spread sliders

Pick a shadow colour and set opacity

Toggle 'Inset' to create inner shadows

Add multiple shadow layers for complex effects, then copy the CSS

Format and beautify JSON data with syntax highlighting.

Validate JSON syntax and find errors instantly.

Create beautiful CSS gradients visually and copy the code.

Pick colors from any format and convert between HEX, RGB, HSL.

Test and debug regular expressions with real-time matching.

Generate placeholder text for designs and mockups.