CSS Box Shadow Generator — Free Online Tool

About the CSS Box Shadow Generator

Tune offset, blur, spread, color and inset with sliders while watching a live preview, then copy the CSS.

Everything runs in your browser — nothing is uploaded.

How to use the CSS Box Shadow Generator

Step 1Type or paste your input.
Step 2The output updates live as you type.
Step 3Copy or download the result when ready.

When people reach for this tool

Build a shadow that looks deliberate rather than heavy

Starting from sensible values is faster than guessing at blur and spread.

Reproduce an existing shadow from a screenshot

Tuning each value against a live preview converges quickly.

Soften a shadow that is flattening the layout

Reducing opacity and spread often restores the separation that was lost.

Practical tips

A shadow that reads as a hard edge looks worse than no shadow at all. Increase the blur before you increase the darkness.
On dark backgrounds, shadows are far less visible than on light ones. An inset highlight or a border usually works better there.

What you get

Live results while you type
Runs entirely in your browser
Copy and download with one click

CSS Box Shadow Generator — FAQ

How do I use the CSS?

Paste box-shadow: ... into any element. The color uses rgba() so the opacity is baked in.

What do the four values mean?

Horizontal offset, vertical offset, blur radius and spread, followed by a colour. Negative offsets push the shadow up or to the left, and negative spread tightens it.

Can a box shadow be inset?

Yes. Adding the inset keyword places the shadow inside the box, which is a common way to suggest a pressed state.