Can I add multiple shadow layers?

Yes. Click the 'Add Shadow Layer' button to create additional shadow layers. Each layer has independent controls for offset, blur, spread, color, and inset.

What does the inset toggle do?

The inset toggle changes the shadow from an outer shadow to an inner shadow, making it appear inside the element instead of outside.

How do I copy the generated CSS?

Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.

Is the generated CSS compatible with all browsers?

Yes. The box-shadow CSS property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.

CSS Box Shadow Generator

Create multi-layer box shadows visually and copy the CSS code.

Shadow 1

Inset

X Offset4px

Y Offset4px

Blur10px

Spread0px

box-shadow: 4px 4px 10px 0px #00000040;

How to Use CSS Box Shadow Generator

Step 1

Adjust the X and Y offset sliders to position the shadow.

Step 2

Set the blur radius and spread to control shadow softness and size.

Step 3

Pick a shadow color and toggle inset if needed.

Step 4

Copy the generated CSS code with one click.

Features

Multiple shadow layers with independent controls.

Per-layer X offset, Y offset, blur, spread, and color.

Inset toggle to create inner shadows.

Live preview that updates in real-time.

One-click CSS code copy to clipboard.

FAQ

: Yes. Click the 'Add Shadow Layer' button to create additional shadow layers. Each layer has independent controls for offset, blur, spread, color, and inset.
: The inset toggle changes the shadow from an outer shadow to an inner shadow, making it appear inside the element instead of outside.
: Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.
: Yes. The box-shadow CSS property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.