CSS shadow generator
Start from a template or build a shadow layer by layer: offset, blur, spread, color and opacity. Colored, glow and hard shadows use the color you pick.
box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 10%),
0px 4px 6px -4px rgb(0 0 0 / 10%);Templates
Making shadows look natural
Real shadows are softer and larger the further an object is from the surface. Stacking two to five layers with growing offset and blur, each at low opacity, looks more natural than one dark shadow; the Layered template does this. A small negative spread keeps the shadow under the element instead of around its sides.
On colored backgrounds a black shadow can look dirty. A shadow in a darker shade of the background, or of the element itself, blends in better; the Colored and Hard templates use the color you pick.
The box-shadow syntax
box-shadow: [inset] x y blur spread color; Positive x moves the shadow right, positive y moves it down. Separate several shadows with commas; the first one is drawn on top.
Questions
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element’s box and border radius. filter: drop-shadow() follows the visible shape, including transparent PNGs and SVGs, but has no spread or inset.
Do shadows affect performance?
Large blurred shadows on many elements, or shadows that animate, can cost rendering time on slow phones. For hover effects, animate opacity of a pseudo-element that holds the shadow.
Why does my shadow look grey on a dark background?
Dark interfaces show shadows poorly. Use a lighter surface for raised elements, or a subtle border, instead of a stronger shadow.