CSS Box Shadow Generator
Generate copy-ready CSS in your browser.
Generate copy-ready CSS in your browser.
The Shadow field is passed straight through into a box-shadow property inside a .box rule and shown ready to copy. Because it accepts the raw value, you can enter a single shadow, a comma-separated stack of shadows, or an inset shadow. All of it is assembled by JavaScript on this page — nothing is uploaded.
The value is: [inset] offset-x offset-y blur-radius spread-radius color. Only the two offsets are required; blur and spread default to 0, and the color defaults to the element's currentColor.
| Part | Meaning |
|---|---|
offset-x | Horizontal shift; positive = right |
offset-y | Vertical shift; positive = down |
blur-radius | Edge softness; must be ≥ 0 |
spread-radius | Grows (+) or shrinks (−) the shape |
color | Any CSS color, usually rgba() for control of alpha |
inset | Draws the shadow inside the box instead of outside |
Input 0 8px 24px rgba(15, 23, 42, .18) produces:
.box {
box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}For a layered card elevation, enter a comma-separated stack:
.box {
box-shadow: 0 1px 2px rgba(15, 23, 42, .08),
0 8px 24px rgba(15, 23, 42, .12);
}Dialing in card and dropdown elevation, adding a focus ring with a spread-only shadow, creating an inner shadow on inputs, or matching a shadow from a design spec exactly.
offset-x offset-y blur spread color, with an optional inset at the start or end. Only the two offsets are required.
Separate each with a comma in one box-shadow declaration. The first listed paints on top.
Blur softens the edge. Spread grows or shrinks the shadow shape before the blur is applied; a negative spread makes it peek out one side only.
No. It is painted outside the box model and never changes element size or pushes siblings.