CSS Box Shadow Generator
Design a box shadow with live feedback: set the offsets, blur, spread, colour and transparency for each layer, then copy the box-shadow declaration. Use up to three layers, and toggle inset when the shadow should sit inside the box.
The output follows the box-shadow syntax in the CSS Backgrounds and Borders Module Level 3. Nothing is sent to a server; the preview and the code are produced in your browser.
box-shadow:
0px 10px 15px -3px rgb(15 23 42 / 0.1),
0px 4px 6px -4px rgb(15 23 42 / 0.1);How to use it
- Pick a layer tab (Layer 1 to 3). Add a layer with the button if you need one more.
- Set the horizontal and vertical offsets, then the blur and spread radius.
- Choose a colour and set its alpha. Lower alpha gives a softer shadow.
- Tick Inset if the shadow should be drawn inside the element, then copy the declaration.
About the CSS behind it
box-shadow takes a comma-separated list of shadows. Each shadow has an optional inset keyword, two required lengths for the offsets, and optional blur and spread lengths followed by a colour. The property is specified in the W3C CSS Backgrounds and Borders Module Level 3.
Blur is the length over which the shadow edge is softened. In the specification a larger blur value produces a wider, lighter edge, and a blur of zero gives a hard edge. Spread expands the shadow shape before blur is applied; a negative spread makes the shadow smaller than the box, which is a common way to keep large soft shadows from spreading too far.
Layering works because each shadow is painted on top of the previous one. A two-layer setup, one large soft shadow and one tight contact shadow, is a standard approach for cards and popovers. For elevation systems with named levels, define the layers once as CSS custom properties and reuse them.
Frequently asked questions
- What do the four lengths in box-shadow mean?
- They are horizontal offset, vertical offset, blur radius and spread radius, in that order. Positive x moves the shadow right, positive y moves it down, a larger blur softens the edge, and a positive spread grows the shadow beyond the box.
- Why do I see several shadows in the output?
- Layering a soft, large shadow with a small, tight one usually looks more natural than a single shadow. Each layer is separated by a comma, and the first layer is drawn on top.
- Does box-shadow affect the layout?
- No. A box shadow is painted outside the element and does not change its size or push neighbouring elements. Use an outline or a border if you need the space to count in the layout.
- Can I use transparent colours in a shadow?
- Yes. The generator writes the colour as rgb(r g b / alpha), which is the CSS Color Level 4 syntax. Lower alpha values give softer shadows that work better on both light and dark backgrounds.