CSS Box Shadow Generator

The box-shadow values

box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1); means, in order:

• Horizontal offset: positive moves the shadow right, negative left.
• Vertical offset: positive moves it down. Light usually comes from above, so most shadows have a positive vertical offset.
• Blur: 0 gives a hard edge, and larger values a softer, wider shadow.
• Spread: grows or shrinks the shadow before blurring. A negative spread with a large blur gives the soft "floating" look.
• Colour and opacity: dark colours at 5–25% opacity look natural. Pure black at full opacity looks heavy.
• inset: draws the shadow inside the box, as if it were pressed in.

Layering shadows

Realistic shadows are usually two or three layers: a small, sharper shadow close to the box and a large, very soft one further away. Separate layers with commas. The first layer is drawn on top. The "Card" and "Raised" presets use this technique, and the "Neumorphic" preset combines a light and a dark shadow on a box the same colour as its background.

Shadows don't change the layout, so they never push other elements around. For performance, avoid animating large blurred shadows. Animate the opacity of a pseudo-element instead.