This free box-shadow generator lets you build CSS drop shadows visually and see the result update live as you work. Drag sliders for horizontal and vertical offset, blur radius, spread radius and color opacity, pick a shadow color, and toggle inset for inner shadows. When the preview looks right, copy the generated box-shadow declaration straight into your stylesheet. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What is the CSS box-shadow property?

box-shadow adds one or more shadow effects around an element's frame. Its values are, in order, the horizontal offset, vertical offset, optional blur radius, optional spread radius, and color, with an optional inset keyword for inner shadows.

What do the blur radius and spread radius do?

The blur radius softens the shadow's edge; larger values make it more diffuse, and 0 produces a hard edge. The spread radius grows (positive) or shrinks (negative) the shadow's size before the blur is applied.

How do I create an inner shadow instead of a drop shadow?

Add the inset keyword to the value, e.g. box-shadow: inset 0 2px 4px rgba(0,0,0,0.5). This casts the shadow inside the element's border rather than outside it. Toggle Inset in this tool to switch modes.

Can I apply more than one shadow to an element?

Yes. Provide a comma-separated list of shadows, e.g. box-shadow: 0 1px 2px #000, inset 0 0 4px #333. They are painted front to back, with the first shadow on top.