CSS Box Shadow Generator
Stack multiple shadow layers, fine-tune offset, blur and spread, then copy production-ready box-shadow CSS.
CSS generated is free to use — no attribution required.
How do you use the box-shadow CSS generator?
Drag the sliders for offset, blur, spread and color, and add layers with the add button. Each layer is a separate shadow, and the preview composites them in real time. The CSS panel shows the exact declaration to paste — including the comma between layers, which is where hand-written multi-layer shadows usually break.
What is the CSS box-shadow syntax?
The property takes box-shadow: offset-x offset-y blur-radius spread-radius color. Only the two offsets are required. The optional inset keyword flips the shadow inside the element, and multiple shadows are comma-separated.
The order of the four lengths is fixed and unlabelled, which is the main source of mistakes: the third number is always blur and the fourth is always spread, so box-shadow: 0 4px 12px has no spread at all.
What does the spread radius do?
Spread grows or shrinks the shadow before the blur is applied. A positive spread makes the shadow larger than the element on every side; a negative spread pulls it in, which is the trick behind shadows that appear to sit tightly underneath a card rather than haloing around it.
Pairing a small negative spread with a large blur — something like 0 12px 24px -8px — is what makes a shadow read as depth rather than as a grey glow.
How do you stack multiple box shadows?
Separate them with commas: box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.1). They paint front to back, so the first shadow in the list sits closest to the element and the last one sits furthest behind.
There is no practical limit on the number of layers, but each one costs a paint, so keep long stacks off elements that animate or repeat many times on a page.
What is the smooth shadow technique?
A single shadow with a big blur looks flat because real light falls off gradually. The fix is to stack several shadows with progressively larger offsets and blurs and progressively lower alpha — for instance four layers going from 0 1px 1px at 7 percent opacity out to 0 16px 16px at the same or lower alpha.
The result reads as a soft, natural shadow rather than a grey smear, and it is the difference between a card that looks designed and one that looks defaulted. The technique was popularized by shadows.brumm.af.
How do you create an inner shadow in CSS?
Add the inset keyword and the shadow is drawn inside the padding box instead of outside it: box-shadow: inset 0 2px 4px rgba(0,0,0,.3). This is how you get pressed buttons, inset wells and the recessed look on form fields.
Inset and outset shadows can be mixed in the same declaration, so a control can have an inner highlight and an outer drop shadow at once.
How do you draw a border with box-shadow?
A shadow with zero offset and zero blur but a positive spread is a ring: box-shadow: 0 0 0 2px #6366f1. Unlike a real border it takes up no space in the layout, so adding or removing it on hover or focus will never shift the surrounding content.
It also follows border-radius automatically, and you can stack rings of increasing spread to build a multi-color focus indicator. This is the standard technique for focus rings that need to sit outside an element without disturbing it.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element’s border box, rounded corners included, and ignores what is drawn inside it. filter: drop-shadow() works from the rendered alpha channel, so it traces the visible shape — a transparent PNG, an SVG icon, or a clipped element.
For a rectangular card box-shadow is the cheaper and more capable choice, since it offers spread and inset which drop-shadow() does not have. For anything non-rectangular it is the wrong tool and will draw a rectangle around your shape.
Does box-shadow affect layout?
No. Shadows are painted outside the box model and take up no space, so they never push siblings around or change an element’s dimensions. That is why they can overflow a container and why a parent with overflow: hidden will clip them.
It also means a shadow can be added on hover without any risk of reflow, unlike a border, which does change the box size unless you compensate with padding or use box-sizing: border-box.
What is the browser compatibility for CSS box-shadow?
box-shadow has essentially universal support and needs no vendor prefixes — the -webkit-box-shadow prefix has not been necessary since Safari 5.1 and can be deleted from any stylesheet still carrying it. Multiple shadows, inset, negative spread and shadows on rounded corners are all part of the same long-supported feature.