What do the shadow values mean?

Horizontal offset moves the shadow left/right, vertical moves up/down, blur controls softness, spread controls size, and color sets the shadow color.

What is an inset shadow?

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

How many shadow layers can I use?

CSS supports unlimited shadow layers. This tool lets you add multiple. Common designs use 1-3 layers for subtle, realistic depth.

Design Tool

CSS Box Shadow Generator

Design CSS box shadows visually with sliders for offset, blur, spread, color, and opacity. Layer multiple shadows and choose from presets. Copy the generated CSS.

100% free — no account needed

Presets

Shadow Layers

H-Offset: 0

-5050

V-Offset: 4

-5050

Blur: 12

0100

Spread: 0

050

Color

Opacity: 15%

Inset

Preview

Generated CSS

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Visual Shadow Designer

Pixel-perfect shadows without guessing CSS values

Intuitive Controls

Sliders for horizontal/vertical offset, blur, spread, color, and opacity.

Multiple Shadows

Stack multiple shadow layers for complex, realistic effects.

5 Presets

Subtle, medium, heavy, floating, and inner glow starting points.

Copy CSS

One-click copy of the generated box-shadow CSS property.

FAQ

Design Tools

Create Stunning Visual Content

Use beautiful shadows in your social media graphics.