Tools · CSS · Box-shadow generator · Guides
Box-shadow generator guides
Three short reads: why this matters, how to do it, and one specific way to use it.
Why One Flat Shadow Looks Fake, and Layered Ones Don't
A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.
Read the guideHow to Build a Layered CSS Box-Shadow
The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.
Read the guideInset vs. Drop Shadow: Which One Your Design Actually Needs
The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.
Read the guide