Box Shadow Generator

Build a CSS box-shadow value from offset, blur, spread and color, in your browser.

How it works

box-shadow takes a horizontal offset, vertical offset, blur radius, spread radius, and a color, in that order, with an optional inset keyword at the front. This tool builds that exact value as you adjust each part, ready to paste into any stylesheet.

Building depth with multiple shadows

Real interface shadows often stack two or three layers — a tight, dark shadow close to the element plus a soft, faint one further out — to look more like natural light than a single flat shadow does. This tool builds one layer at a time; combine multiple results with a comma to stack them.

Inset vs. regular shadows

A regular shadow appears to lift the element off the page. An inset shadow reverses that, making the element look pressed into the page — often used for input fields or pressed button states.

Frequently asked questions

What do blur and spread each do?

Blur softens the shadow’s edge into a gradient — larger values spread the fade further. Spread grows or shrinks the shadow’s size uniformly on every side before blur is applied, independent of the element’s own size.

What does inset do?

It draws the shadow inside the element’s border instead of outside it, creating a carved-in look rather than a shadow cast onto the page.