Create soft, layered or inset CSS box shadows with a live preview, then copy the CSS.
CSS
box-shadow: [inset] x-offset y-offset blur spread color;
Separate multiple shadows with commas. The first shadow is drawn on top.
0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08)0 10px 25px -5px rgba(0,0,0,.15)0 0 20px 4px rgba(255,90,31,.45)In order: horizontal offset, vertical offset, blur radius, spread radius and color, plus the optional keyword inset. For example, 0 4px 12px 0 rgba(0,0,0,0.15) is a soft shadow 4px below the element.
Layer two or three shadows: a small, sharper one close to the element and a larger, softer one further away, both with low opacity. Real light rarely produces one hard, dark shadow.
inset draws the shadow inside the element instead of outside it, making it look pressed in. It's useful for input fields and pressed buttons.
Shadows are cheap for normal use. Animating large blur radii on many elements can slow scrolling on low-end phones; animate opacity or transform instead where possible.