CSS Box Shadow Generator

How to use the css box shadow generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

A box-shadow takes four lengths and a colour: horizontal offset, vertical offset, blur radius and spread. Offsets move the shadow, blur softens its edge, and spread grows or shrinks the shadow before blurring — a negative spread is how you get a tight shadow that does not leak out at the sides.

Shadows read as light direction, so keep the vertical offset positive and the horizontal offset near zero unless you have a reason: that matches a light source above, which is what almost every interface assumes. Large blur with low opacity looks far more natural than small blur with high opacity, because real shadows are diffuse.

The inset keyword draws the shadow inside the box instead of outside, which is how pressed buttons and inset wells are made.

Common uses

• Giving cards a subtle lift without a heavy border.
• Making a pressed or inset state for a button.
• Matching a shadow from a design file by eye.

Frequently asked questions

Why does my shadow look muddy?

Usually too much opacity and too little blur. Try a large blur with an alpha around 0.1–0.2; a real shadow is soft and faint.

Can I use more than one shadow?

Yes — box-shadow accepts a comma-separated list, and layering two or three faint shadows at different blurs looks better than one heavy one. Generate them one at a time and join them with commas.

Does box-shadow affect layout?

No. It paints outside the element without taking any space, so it never pushes neighbours around.