Box Shadow Generator

Build a CSS box-shadow visually — offset, blur, spread, color, and inset — with a live preview, and copy the ready-to-use CSS.

Offset X: 0px

Offset Y: 10px

Blur: 20px

Spread: -5px

Opacity: 25%

Color

Inset (inner shadow)

box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25);

How was this tool?

Your feedback helps us improve Box Shadow Generator.

Why use Box Shadow Generator?

A convincing box-shadow usually needs a slightly negative spread and a soft blur to avoid looking like a harsh outline — a detail that's fiddly to dial in through trial and error in a stylesheet. This tool exposes every parameter as a slider with a live preview, so the visual result is obvious immediately, and the exact CSS is one click away once it looks right.

Key benefits

Live visual preview
All five box-shadow parameters covered
Inset (inner shadow) support
Free, unlimited use

Features

Offset X/Y, blur, and spread sliders
Color and opacity control
Inset toggle for inner shadows

Popular use cases

Adding a card or button shadow without guessing pixel values
Prototyping a subtle elevation effect for a UI component
Creating an inner shadow for a pressed/inset look

How to use Box Shadow Generator

1
Adjust the sliders
Offset X/Y, blur, spread, opacity, and color.
2
Toggle inset if needed
For an inner shadow instead of a drop shadow.
3
Copy the CSS
One click, ready to paste.

Frequently asked questions

What do offset, blur, and spread each control?

Offset X/Y move the shadow horizontally/vertically from the element. Blur controls how soft the shadow's edge is (0 is sharp). Spread expands or shrinks the shadow's size independent of the element itself — negative spread is common for a soft, contained shadow.

What's the difference between a normal and inset shadow?

A normal box-shadow appears outside the element's edges, like a drop shadow. An inset shadow appears inside the element, creating a pressed-in or recessed look.

Can I stack multiple shadows?

This tool generates one shadow layer. CSS supports comma-separated multiple box-shadow values for layered effects — combine two generated shadows manually for that.

Last reviewed: September 2026

How was this tool?

Related tools