CSS Box Shadow
Design a CSS box-shadow by setting the X/Y offset, blur radius and color, then copy the finished declaration. A subtle 40%-opacity alpha is appended so shadows look soft rather than harsh.
Try it now
Worked example
CSS: box-shadow: 0px 8px 24px #00000066;
Inputs
- X offset
0 - Y offset
8 - Blur
24 - Color
#000000
Frequently asked
Why is there an alpha at the end?
The color gets a '66' hex alpha (~40% opacity) so the shadow blends naturally with the background.
What do X and Y do?
They offset the shadow horizontally and vertically in pixels; positive Y pushes the shadow downward.