A box shadow is the soft or hard dark area that makes a card, a button or a menu look raised above the page. In CSS it is one property, box-shadow, but it takes up to six values per shadow and any number of shadows, which is hard to picture from the numbers alone. This tool lets you build the shadow by changing the numbers and watching a card react, then gives you the CSS to copy. You can stack up to eight layers, use inset shadows, choose the colour with transparency, and paste an existing box-shadow to edit it. Everything runs in your browser and nothing is uploaded.
What each number does
The syntax of one shadow is inset? offset-x offset-y blur spread color. The two offsets move the shadow right and down; negative values move it left and up. The blur radius softens the edge: the specification asks for a Gaussian blur whose standard deviation is half the blur value, so a 30px blur fades over roughly 30px. It can never be negative. The spread grows the shadow in every direction before blurring, or shrinks it when negative. A negative spread with a large vertical offset gives the "lifted" look, because the shadow is smaller than the card and only shows underneath it. A spread of 4px with no blur and no offset is a plain outline, which is how the Glow preset makes its ring. A shadow follows the card's border-radius, and it never changes the layout around the element.
Layers: why several shadows look more real
Real light does not make one uniform shadow. Close to the object the shadow is small and dark, and farther away it is wide and faint. The Layered preset imitates this with five shadows, each twice the size of the one before and each at 8% opacity: 0 1px 1px, 0 2px 2px, 0 4px 4px, 0 8px 8px and 0 16px 16px. Their sum is smoother than a single shadow with the same total blur. In CSS the shadows are separated by commas and the first one is drawn on top, so the order matters when layers overlap; use the move buttons to change it.
Shadows look best in a transparent dark colour rather than solid grey, because the page colour shows through and the shadow takes its tint. Opacity is part of the colour: rgba(0, 0, 0, 0.15) and the hex code #00000026 are the same colour, and you can choose either format. On a dark background a black shadow is almost invisible, so use a larger offset, a stronger opacity or a coloured glow.
drop-shadow() and good to know
filter: drop-shadow() is a cousin of box-shadow that follows the visible outline of what is drawn, which is what you want for a PNG with transparent corners or an SVG icon. It has no spread and no inset, so this tool offers that version only for layers that do not use them, and says so otherwise. Box shadows are drawn outside the element's box, so an ancestor with overflow: hidden will cut them off. Animating a large blur can be expensive because the browser repaints it; for a hover effect it is often cheaper to fade a second element that carries the final shadow. In forced-colors (high contrast) mode, browsers remove box shadows, so do not rely on a shadow alone to show keyboard focus. Pair your shadows with a gradient from the CSS gradient generator, and check the text colour on your card with the colour tools.
