What is the CSS Box Shadow Generator?
Build single and layered CSS box shadows with visual controls. Set offset, blur, spread, colour, and inset, then copy the box-shadow value.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Box Shadow Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Set offset, blur, and spread
Drag the X offset, Y offset, blur radius, and spread radius sliders. Positive Y offset casts the shadow below; negative above.
Set colour and opacity
Pick a shadow colour using the colour picker and adjust the alpha slider. For realistic shadows, use rgba with low alpha (0.05-0.2).
Add layers and copy
Click Add Layer to stack multiple shadows. Click Copy to grab the complete comma-separated box-shadow value.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Subtle card shadow */
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Layered depth shadow */
.card-elevated {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(0, 0, 0, 0.06);
}
/* Coloured glow */
.btn-primary {
box-shadow: 0 8px 24px rgba(108, 46, 245, 0.35);
}
/* Inset (inner shadow) */
.input:focus {
box-shadow: inset 0 0 0 2px #6C2EF5;
}Layer 2-3 shadows with different blur radii for realistic depth. A single sharp shadow looks flat on flat backgrounds.
Ready-to-use CSS patterns
Drop any of these straight into your project — no modifications needed.
Subtle card
Minimal shadow for card components on white or light grey backgrounds.
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}Use at 0.06-0.10 alpha for white backgrounds.
Layered elevation
Three-layer shadow for realistically elevated surfaces, like a Material Design card.
.elevated {
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 12px rgba(0,0,0,0.08),
0 16px 40px rgba(0,0,0,0.06);
}Stacked shadows look more realistic than a single large shadow.
Coloured brand glow
Glowing shadow in your brand colour for buttons and highlighted cards.
.btn {
box-shadow: 0 8px 24px rgba(108, 46, 245, 0.30);
}Keep the alpha at 0.25-0.35 to avoid looking garish.
Inset focus ring
Inner shadow for focused inputs - avoids the layout shift of border-width changes.
.input:focus {
outline: none;
box-shadow: inset 0 0 0 2px #6C2EF5;
}Inset shadows do not affect element dimensions or layout.
Pro tips for better results
Layer 2-3 shadows for realistic depth
Real shadows have a soft ambient component and a harder directional component. Use a small sharp shadow (low blur) plus a larger diffuse shadow (high blur) to mimic real lighting.
Keep shadow colour close to the surface background
Shadows on white backgrounds look best with rgba(0,0,0, 0.05-0.15). On dark backgrounds, slightly lighter transparent shadows. Pure black shadows at high opacity look unnatural.
Use box-shadow for focus rings instead of outline
box-shadow: 0 0 0 3px rgba(108,46,245,0.5) creates a rounded focus ring that follows border-radius. Unlike outline, it does not shift the layout.
Spread radius can create a border effect
box-shadow: 0 0 0 1px #e2e8f0 is a 1px border that does not affect layout dimensions - useful when you need a border that does not change element size.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.