Box Shadow Generator
Build and preview CSS box-shadows visually with multiple layers
Shadow Layers
Layer 1 Settings
Opacity: 40%
Color
Presets
Preview Background
Background
Box Color
Preview
CSS Code
box-shadow: 0px 8px 24px -4px rgba(139,92,246,0.40);
Usage
CSS
box-shadow: 0px 8px 24px -4px rgba(139,92,246,0.40);
Tailwind (arbitrary value)
className="shadow-[0px 8px 24px -4px rgba(139,92,246,0.40)]"
About the Box Shadow Generator
This box shadow generator builds CSS shadows layer by layer, with offset, blur, spread and colour controls and a live preview. Stacking two or three subtle layers is what produces a realistic shadow rather than a grey smudge.
A box shadow generator matters because a single shadow rarely looks convincing. Real shadows have a tight dark contact area near the object and a wide soft falloff further out, and one layer cannot express both.
Layering is the technique. A small shadow with little blur creates the contact edge; a larger, softer, lighter one gives the ambient spread. Two or three layers combined read as depth, while one large blurred layer reads as a grey blob behind the element.
Restraint helps. Low opacity — around 10 to 25% black — and small vertical offsets keep an interface looking crisp, since light comes from above and shadows fall below. Spread is the least-used value: negative spread pulls a shadow in, which is handy for a tight edge without repositioning.
How to use the Box Shadow Generator
- Add a shadow layer. Start with a small offset and low blur for the contact edge.
- Set offset, blur and spread. Adjust the values and watch the preview update.
- Add a softer second layer. Stack a larger, lighter, more blurred shadow for ambient depth.
- Copy the CSS. Take the comma-separated box-shadow value into your stylesheet.
Box Shadow Generator features
- Stack multiple shadow layers
- Offset, blur, spread and colour per layer
- Inset shadows as well as outer ones
- Presets from soft and subtle to neon glows
- Live preview against the generated CSS
- Copy the finished box-shadow value
Frequently asked questions
What do the four numbers in a box-shadow mean?
Horizontal offset, vertical offset, blur radius and spread. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before the blur is applied.
Why do my shadows look like a grey smudge?
Usually one large, dark, evenly-blurred layer. Real shadows are several overlapping ones: a tight, slightly darker layer close to the element and a wider, much fainter one behind it. Stacking two or three subtle layers is what reads as depth.
What is an inset shadow for?
Making something look recessed rather than raised — pressed buttons, input fields and wells. It draws the shadow inside the element's edges instead of outside them.
Can it generate text shadows?
No, this builds box-shadow values only. The syntax for text-shadow is similar but has no spread value, so a box-shadow value cannot simply be pasted across.
Do shadows hurt performance?
Large blur radii on many elements can, because the browser repaints a blurred region on every change. It is rarely a problem for static cards and worth watching on anything animated.