Box shadow generator
Build layered, soft shadows with a live preview and copy the CSS.
Shadows that give depth, not dirt
Box shadows are how interfaces show elevation: a card resting on a page, a modal floating above it, a pressed button sinking in. A single hard grey shadow looks dated; modern interfaces use several soft, low-opacity shadows that combine into something that feels physical. Dialling in four numbers and a colour per layer by editing CSS and refreshing is slow, so this tool gives you sliders and a live preview.
Add up to six layers, each with a horizontal and vertical offset, blur, spread, colour, opacity and an optional inset mode for inner shadows. Presets provide common elevations (subtle card, raised card, floating modal, inset pressed, soft glow). The CSS is written as one box-shadow declaration with layers separated by commas, and colours with opacity are written in the modern rgb(r g b / a) form.
Guidelines
- Light comes from above: use a positive vertical offset and little or no horizontal offset.
- Higher elevation means larger offset, larger blur and a lower opacity.
- Tint shadows with a dark shade of the background colour rather than pure black for a more natural look.
- On dark backgrounds, shadows are barely visible; elevation is usually shown with lighter surfaces instead.
Preview and CSS are generated in your browser. For non-rectangular shapes use filter: drop-shadow() instead.
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour, optionally preceded by inset. Positive offsets move the shadow right and down; blur softens the edge; spread grows or shrinks the shadow before blurring.
How do I make a realistic shadow?
Layer two or three shadows with increasing offset and blur and low opacity instead of one dark shadow. Real shadows have a tight, darker contact shadow plus a wide, soft one. The presets here do that.
What is the difference between box-shadow and drop-shadow()?
box-shadow follows the rectangular border box (including rounded corners). The CSS filter drop-shadow() follows the actual shape of the element, including transparent areas of an image, but is costlier to render.
Does a shadow take up space?
No. Shadows are painted outside the box and do not affect layout, so they can overlap neighbours and be clipped by a parent with overflow hidden.