Box Shadow Generator

Frequently asked questions

What do the four numbers in box-shadow mean?

They are offset-x, offset-y, blur-radius, and spread-radius. Positive offsets push the shadow right and down; blur softens the edge; spread grows or shrinks the shadow before blurring.

How do I make a realistic drop shadow?

Layer two or three shadows with increasing blur and decreasing opacity, for example a tight 1px shadow plus a wider 20px ambient one. Real shadows are softer and lighter than the default flat shadow most designers reach for.

What's the inset keyword for?

inset draws the shadow inside the element instead of outside, which is useful for pressed buttons, inputs, and inner glows. Outer and inner shadows can be combined in the same box-shadow declaration.