CSS Box-Shadow Generator
Dial in a shadow with live preview and copy the code.
About CSS Box-Shadow Generator
Shadows are what give interface elements a sense of elevation. The trick behind professional-looking shadows is layering two or three soft, low-opacity shadows rather than one big dark one — which is what real light actually does.
How to use CSS Box-Shadow Generator
- 1
Set the horizontal and vertical offset; usually only vertical gets a value, since light comes from above.
- 2
Adjust blur and spread until the softness looks right.
- 3
Choose the shadow colour and opacity — lower opacity reads as more natural.
- 4
Copy the CSS.
Frequently asked questions
How do I make a shadow look natural?
Keep opacity low, around ten to twenty percent, and blur generous. A fully opaque black shadow almost always looks artificial.
What is an inset shadow for?
Depressions — an input field or a pressed button. It makes the element read as recessed into the page rather than raised above it.
Do shadows affect performance?
A handful is fine. Very large blur radii across dozens of animated elements can cost frame rate on weaker devices.