TV
Home All Tools Blog About

CSS Box Shadow Generator

Create CSS box shadows visually and copy the generated code.

box-shadow: ;

Presets

How It Works

Use sliders to control shadow offset, blur, spread, colour, and opacity. See the live preview and copy the CSS box-shadow property.

**CSS Box Shadow Generator — Design Shadows Visually**

Box shadows are one of the most versatile CSS effects, used for cards, buttons, modals, and depth effects. Our visual generator lets you design the perfect shadow with sliders and copy the CSS instantly.

**The CSS box-shadow Property**

Syntax: `box-shadow: offset-x offset-y blur-radius spread-radius color;`

**Parameters:**
- **offset-x** — Horizontal shadow position (negative = left, positive = right)
- **offset-y** — Vertical shadow position (negative = up, positive = down)
- **blur-radius** — How blurry the shadow is (0 = sharp edge)
- **spread-radius** — How far the shadow expands beyond the element
- **color** — Shadow colour (supports rgba for opacity)
- **inset** — Keyword to create an inner (inset) shadow

**Example Shadows**

Subtle card shadow:
`box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);`

Elevated button:
`box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08);`

Deep shadow:
`box-shadow: 0 10px 30px rgba(0,0,0,0.3);`

Inset shadow (sunken):
`box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);`

**Multiple Shadows**

CSS allows multiple shadows separated by commas:
`box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);`
This creates a more realistic layered shadow effect.

**Material Design Shadow Levels**

Google's Material Design defines 24 elevation levels. Key ones:
- **Level 1 (Cards):** 0 1px 3px rgba(0,0,0,0.2)
- **Level 4 (FAB hover):** 0 4px 5px rgba(0,0,0,0.2)
- **Level 8 (Menus):** 0 8px 10px rgba(0,0,0,0.2)
- **Level 16 (Modals):** 0 16px 24px rgba(0,0,0,0.2)

Frequently Asked Questions

Use a small offset (2–4px), medium blur (8–16px), and low opacity (0.1–0.15): box-shadow: 0 2px 8px rgba(0,0,0,0.12).
Adding "inset" before the values creates a shadow inside the element rather than outside. Useful for sunken inputs, pressed button states, and well effects.
Yes. Separate multiple shadows with commas. Multiple layered shadows (one close/sharp + one distant/soft) look more realistic than a single shadow.
Use a colorful shadow with no offset and medium spread: box-shadow: 0 0 20px rgba(102, 126, 234, 0.6). This creates a coloured glow.
No. Unlike border or padding, box-shadow does not affect the element's size or layout. It is purely visual.