How to make a CSS box shadow
- Drag the sliders or type values for Horizontal offset, Vertical offset, Blur, Spread and Opacity, and pick a colour. Tick Inset to draw the shadow inside the box.
- Press Add shadow to stack another layer; click a layer's tab to edit it. Presets such as Layered and Floating are a quick start, and the preview colours and corner radius can be changed to match your design.
- Press Copy CSS to copy the box-shadow line.
Shadows and performance
Box shadows are cheap to draw in modern browsers, even several layers deep. Large blur values on many elements at once, or animating box-shadow itself, can make scrolling and animations stutter on slower phones. If you want a shadow to grow on hover, a common trick is to put the bigger shadow on a pseudo-element and fade its opacity, because opacity is easier for the browser to animate.
Shadows in dark mode
Shadows show up poorly on dark backgrounds, because there is little room to get darker. Dark themes often use a lighter surface colour, a thin border or a faint glow to lift a card instead of a heavy black shadow. Try your shadow with a dark background colour in the preview before you ship it.