Box Shadow Generator

Dial in a CSS box-shadow and copy it.

X

px

Y

px

Blur

px

Spread

px

ColourOpacity

%

box-shadow: 0px 8px 24px 0px rgba(17, 17, 17, 0.12);

Worked example

X 0, Y 8, blur 24, spread 0, colour #111111 at 12% opacity produces box-shadow: 0px 8px 24px 0px rgba(17, 17, 17, 0.12). The preview square uses that shadow.

FAQ

What do the four lengths mean?: X and Y move the shadow, blur softens it, and spread grows or shrinks it before the blur.
Can the shadow go up or left?: Yes. Use a negative X or Y.
How is opacity applied?: The colour is written as rgba. 12% opacity is an alpha of 0.12.