Set offset, blur, spread, color and opacity for up to 3 shadow layers and copy the CSS. Runs on your device.
A box shadow layer has up to five numbers and a color, written in this order: x offset, y offset, blur, spread, color. The x offset moves the shadow right (negative moves it left) and the y offset moves it down (negative moves it up). Blur softens the edge; 0 is a hard edge and it cannot be negative. Spread grows the shadow on all sides when positive and shrinks it when negative. Inset puts the keyword inset first and draws the shadow inside the box instead of outside. Each number on this page can be typed from -500 to 500 px, except blur, which runs from 0 to 500 px. Opacity is a percent, 0 to 100, and sets the alpha of the shadow color.
The page writes the shortest valid form. A zero is written as 0 with no unit. When blur and spread are both 0 they are left out, so a hard shadow reads 4px 4px #000000. When spread is not 0 the blur is always written, because spread is the fourth number and cannot be skipped to. A color at 100% opacity is written as a six-digit HEX code; at any other opacity it is written as rgba(r, g, b, alpha), with the alpha being opacity divided by 100, kept to 3 decimals. Layers are joined by commas in the order you see them. Here the first layer is the one drawn on top, which is how CSS stacks multiple shadows.
One layer gives a plain shadow. Two or three layers give the soft, natural look common in cards: a larger, lighter, blurrier layer for the broad glow and a small, tighter, darker layer for the contact edge. The page opens on two layers, 0 8px 24px at 20% black and 0 2px 6px at 10% black. Each layer has its own inset switch, so one box can have an outer shadow and an inner one. A shadow does not take up room and does not change the layout of nearby elements, and it follows the border-radius of the box.
The box color, the background color and the 12 px rounded corners of the preview are there so you can judge the shadow against your own design. They are not in the code. The preview box is 170 by 110 px. Shadows with a large offset or blur can be cut off by the edge of the stage, which does not happen on a real page unless a parent element hides overflow. Nothing you type is stored or sent; the page works out the rule in your browser.
inset (optional), x offset, y offset, blur, spread, color. For example, inset 0 2px 4px rgba(0, 0, 0, 0.5). The offsets are required; blur and spread are optional, but spread cannot be written without blur.
Use a positive y offset with a negative spread of about the same size as the blur. For example, 0 10px 10px -10px rgba(0, 0, 0, 0.5) keeps the shadow narrower than the box so it shows mostly below. Set it with the Layer 1 y offset, blur and spread boxes and watch the preview.
CSS allows any number, separated by commas. This page writes 1 to 3 layers, which is enough for most card and button shadows. The first one in the list is drawn on top.
It draws the shadow inside the border instead of outside, so the box looks pressed in. Each layer has its own switch, so one rule can hold an inside and an outside shadow. The keyword is written first.
box-shadow only describes the shadow. The preview colors let you check how the shadow looks on a light, dark or colored surface, but you set the real background and background-color in your own CSS.