A single flat shadow rarely looks convincing on its own. Real world shadows are soft and layered, a sharp, low opacity shadow close to the object combined with a larger, softer, more transparent shadow further out, which is why most professional design systems define elevation using two or three stacked shadow values rather than one. CSS supports this directly, since box-shadow accepts a comma separated list of shadow layers applied in a single declaration.
Every layer, every pixel value and the resulting CSS string are computed in your browser as you drag the controls, with nothing sent anywhere.
The five values behind every box shadow generator layer
Horizontal and vertical offset move the shadow away from the element it belongs to, positive values shifting it right and down, negative values shifting it left and up. Blur radius softens the shadow's edge, with 0 producing a sharp, hard edged shadow and larger values spreading the transition across more pixels. Spread radius grows or shrinks the shadow's size independently of the element itself, a positive spread makes the shadow bigger than the element on every side, a negative spread makes it smaller.
Colour, including its alpha channel, controls both the hue of the shadow and how strongly it sits on top of whatever is behind it. Real shadows are rarely pure black at full opacity, a dark, slightly desaturated colour at 10 to 25 percent opacity produces a far more convincing result than solid black, which tends to look flat and artificial against light backgrounds.
- Offset X and Y: position the shadow relative to the element.
- Blur radius: how soft the shadow's edge is, 0 for sharp, larger for diffuse.
- Spread radius: grows or shrinks the shadow independently of the element's own size.
- Colour and alpha: the shadow's hue and how strongly it shows against the background.
- Inset: switches the shadow from an outer drop shadow to an inner, pressed in effect.
Why multiple box shadows look more realistic
Stacking multiple box shadows is the standard technique for convincing elevation because real world light does not produce a single uniform shadow. A close, tight, higher opacity layer represents ambient occlusion right at the object's edge, while a larger, softer, lower opacity layer represents the broader cast shadow from a light source further away, and combining both in one declaration reads as far more natural than either alone.
This generator lets you add as many shadow layers as you need, reorder is handled automatically by list position, and every layer can be edited or removed independently, so building a two or three layer elevation shadow is exactly as easy as building one.
Using an inset box shadow for pressed and recessed effects
Turning on the inset toggle flips a shadow from sitting outside the element's border box to sitting inside it, which is the standard way to create a pressed, indented or recessed appearance, commonly used for active button states, input field focus rings and card cutouts. An inset box shadow uses the identical five values as a normal shadow, only the rendering direction changes.
Combining an inset shadow with a normal outer shadow on the same element is common in card and button design, since it lets a component look simultaneously raised from the page and slightly recessed at its own surface, which reads as a more tactile, physical material.
Reading and adjusting box shadow blur and spread together
Blur and spread interact rather than acting independently. A shadow with high blur and no spread fades out gently but stays roughly the size of the element, while the same blur combined with a large positive spread produces a much bigger, still soft halo. For a tight, subtle elevation effect, keep blur moderate and spread small or slightly negative. For a glow style effect around a highlighted element, push both blur and spread higher together.
This generator's live preview is the fastest way to build an intuition for that interaction, since typing exact numbers into a formula rarely predicts how a shadow will actually look until you have adjusted a good number of them by eye.
How this box shadow generator works under the hood
Each layer is stored as its five component values plus the inset flag, and the tool joins them into a single box-shadow declaration following the exact syntax order the CSS specification requires: offset x, offset y, blur radius, spread radius, colour, with inset written first when present. Every layer is comma separated, matching how CSS itself expects multiple shadows to be declared.
The preview element is styled with that identical generated string, so there is no separate rendering path that could drift out of sync with the CSS you copy, what you see in the preview is exactly what will render once pasted into your own stylesheet.
| Style | Values | Use |
|---|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.12) | Default resting elevation for a card |
| Raised hover | 0 8px 20px rgba(0,0,0,0.18) | Hover state to suggest a card lifting |
| Soft glow | 0 0 24px rgba(59,130,246,0.5) | Highlight or focus effect around an element |
| Pressed button | inset 0 2px 4px rgba(0,0,0,0.25) | Active or pressed button state |
How to build a CSS box shadow
- 1
Add a shadow layer
Start with one layer and add more for a softer, more realistic stacked effect.
- 2
Set offset, blur and spread
Adjust horizontal and vertical offset, blur radius and spread radius for each layer.
- 3
Pick a colour and opacity
Choose a shadow colour and lower its opacity for a softer, more natural result than solid black.
- 4
Copy the generated CSS
Copy the finished box-shadow declaration and paste it directly into your stylesheet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the box shadow generator.
For anything beyond a single flat shadow, yes, considerably. Once two or three layers are involved, keeping offset, blur, spread and colour straight across every layer by hand is slow and error prone, while a box shadow generator lets you see each layer's effect immediately and copy the finished, correctly ordered CSS declaration in one step.
Two or three layers is the sweet spot for most elevation effects, one tight, higher opacity layer close to the element and one or two larger, softer, lower opacity layers further out. Beyond three or four layers the visual difference becomes hard to see while the CSS declaration grows unnecessarily long.
Blur radius controls how soft the transition is at the shadow's edge, with 0 producing a hard, sharply defined edge. Spread radius controls the overall size of the shadow shape before blur is applied, growing it larger on every side with a positive value or shrinking it with a negative value, independent of how soft or sharp that edge ends up looking.
Solid black at full opacity is the most common cause. Real shadows are semi transparent and often slightly tinted toward the colour of the light or the surface, so switching to a dark grey or a colour close to black at 10 to 25 percent opacity, combined with stacking a soft outer layer, almost always looks more convincing than one hard, fully opaque shadow.
A normal box shadow appears to sit behind and around the element, suggesting it is raised above the page. An inset box shadow appears inside the element's own boundary, suggesting the surface is pressed inward or recessed, which is why it is the standard choice for active button states and focused input fields.
Yes. box-shadow automatically follows whatever border-radius is applied to the same element, so a shadow on a rounded card or button will have matching rounded corners with no extra configuration needed beyond setting border-radius on the element itself.
Box shadow is purely visual and never affects layout, document flow or the space an element takes up, which is different from a border or an outline in some contexts. This makes it safe to add or adjust shadows without triggering any reflow of surrounding content.