What does each shadow property do?

X Offset: horizontal position. Y Offset: vertical position. Blur: softness of the edge. Spread: size of shadow. Opacity: transparency. Inset: shadow inside the element.

Can I combine multiple shadow layers?

Yes! CSS box-shadow supports comma-separated values. Click "Add" to stack multiple shadows for realistic layered effects.

What is an inset shadow?

An inset shadow appears inside the element's boundary rather than outside, creating an "embedded" or "pressed" look.

How do I copy the CSS?

Click the Copy button next to the code output to copy the full box-shadow CSS declaration.

Does this support colored shadows?

Yes. Each shadow layer has its own color picker and opacity slider, so you can create colored glows and shadows.

ToolsArena

Box Shadow Generator

Generate CSS box-shadow code visually with live preview and presets.

box-shadow: 0px 8px 24px -4px #00000033;

Background

Box Color

Border Radius: 12px

Shadow Layers

Layer 1

Inset

X Offset: 0px

Y Offset: 8px

Blur: 24px

Spread: -4px

Opacity: 20%

Color

Presets

How to Use Box Shadow Generator

1
Adjust shadow sliders (X, Y, Blur, Spread, Opacity).
2
Change shadow color with the color picker.
3
Add more layers with the "Add" button.
4
Try presets for quick starting points.
5
Copy the CSS output.

About Box Shadow Generator

Design CSS box shadows interactively with a live preview canvas. Control X/Y offset, blur, spread, opacity, and color for each shadow layer. Add multiple shadow layers for complex effects. Includes 6 presets (soft, hard, layered, glow, inset). Copy the CSS instantly.