Box Shadow Generator
Build layered CSS box shadows visually, then copy the ready-to-use CSS — no guessing at offsets or rgba values.
.shadow-box {
box-shadow:
0px 8px 24px -2px rgba(0, 0, 0, 0.25);
}Why build shadows visually?
box-shadow's syntax — offset-x, offset-y, blur, spread, then a color that's usually easier to reason about as rgba than hex — is easy to get almost right and hard to get looking exactly right by guessing values. Adjusting sliders against a live preview gets you there in seconds, and stacking multiple layers is how most polished, realistic shadows are actually built.
Layer tips
- Tight + soft — pair a small, sharp layer with a larger, softer one for realistic elevation (see the Elevated preset).
- Colored glow — use a saturated color with high blur and no offset for a glow effect.
- Neumorphic — combine a dark shadow on one side with a light one on the opposite side.
Frequently asked questions
Is the generated CSS standard, or does it need a library?
It's plain standards-based CSS box-shadow syntax — no framework, preprocessor, or library required. Copy it straight into a stylesheet.
Can I stack multiple shadows on one element?
Yes — add up to 4 layers, each with its own offset, blur, spread, color, and opacity. They're combined into a single comma-separated box-shadow value, exactly how CSS supports layered shadows natively.
What does the inset option do?
It switches a layer from an outer drop shadow to an inner shadow (inset), useful for pressed-in, carved, or neumorphic effects.
What are the presets?
Six common shadow styles — Soft, Medium, Hard, Elevated, Glow, and Neumorphic — that you can apply instantly and then adjust to taste.