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

Search tools...

Box Shadow Generator

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

Updated Mar 2026100% Private — runs in browser

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 our free CSS box shadow generator. Control every shadow property visually on a live canvas and copy production-ready CSS with a single click.

Key Features

Full Control: Adjust X/Y offset, blur radius, spread, opacity, and color per layer.
Multiple Layers: Stack multiple shadow layers for realistic, complex effects.
6 Presets: Soft, hard, layered, glow, and inset shadows to start from.
Inset Shadows: Create "pressed" or "embedded" inner shadow effects.
Instant Copy: One-click copy of the complete box-shadow CSS declaration.

Who Is This For?

UI designers perfecting card and button shadows, frontend developers implementing design specs, and anyone who wants to create polished depth effects without manually tuning CSS values.

Privacy & Security

Runs 100% in your browser — no signup, no uploads, no data stored.