CSS Box Shadow Generator
Create CSS box-shadow effects with a live preview. Multi-layer shadows, neumorphism, glow, retro — copy ready CSS. Free, browser-based, no sign-up.
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.10);
Shadow Layers
🎨 What This Tool Does
A free online CSS box-shadow generator with a live preview. Build elegant drop shadows, layered depth effects, neumorphism, glowing buttons, and retro hard shadows — all without writing CSS by hand. Adjust each layer independently with sliders, then copy the ready-to-use CSS.
Supports up to 6 layered shadows, inset mode, custom colors (hex, rgb, rgba), and any combination of x/y offset, blur, and spread. Everything runs in your browser — no sign-up, no size limits, no ads.
🧩 Box Shadow Properties Explained
X / Y Offset
Horizontal and vertical position of the shadow relative to the element. Positive Y = shadow below (most natural — simulates light from above). Negative Y = shadow above.
Blur
How soft the shadow edge is. 0 = hard, sharp edge (like retro/brutalist shadows). Higher values = softer, more diffuse. Most modern shadows use blur 10-40px.
Spread
How much the shadow extends beyond (or inside) the element before blurring. Positive = bigger shadow. Negative = smaller. Use for glow effects (0 blur + positive spread).
Inset
When enabled, the shadow renders inside the element instead of outside. Creates pressed, recessed, or carved effects. Useful for form inputs and "pressed button" states.
💡 Design Tips
- Stack 2 shadows for more realistic depth — one tight dark shadow for the contact shadow, one larger soft shadow for ambient light
- Use rgba() colors with low alpha (0.10-0.20) for modern subtle shadows, not pure black
- Match the light source — pick one direction for all shadows on a page (usually top-left light = bottom-right shadow)
- Neumorphism requires the same background color on the element and its container — try the Neumorphism preset
- Use negative spread with positive Y offset to create elevated card shadows (like Material Design elevation)
- Hard shadows (blur 0) feel retro or brutalist — pair with bright colors for a fun 80s/90s aesthetic
- Performance — avoid animating box-shadow directly; animate a pseudo-element's opacity instead for smoother frame rates
🔒 Privacy
- ✓ Runs entirely in your browser — no server processing
- ✓ Your shadow values and CSS are never sent, stored, or logged
- ✓ Works offline after the page first loads
❓ Frequently Asked Questions
What is a CSS box shadow?
A CSS box shadow is a visual effect that adds a shadow to an HTML element. It is specified with the box-shadow property and takes horizontal offset, vertical offset, blur radius, spread radius, color, and an optional "inset" keyword. Box shadows are rendered natively by the browser — no images needed.
Can I layer multiple shadows?
Yes. Click "Add shadow" to add additional shadow layers. Multiple shadows are separated by commas in the CSS. Layered shadows are the foundation of advanced effects like neumorphism (soft UI), glass morphism, and depth cards with multiple light sources.
What is neumorphism?
Neumorphism ("new + skeuomorphism") is a design style that uses two offset shadows — one light and one dark — to make an element look embossed or extruded from the background. The effect requires the element to have the same background color as its container. Try the "Neumorphism" preset to see it in action.
What does "inset" do?
The inset keyword makes the shadow render inside the element instead of outside. This creates an inner shadow effect — useful for making elements appear pressed, recessed, or carved into the surface. Enable the "inset" toggle on any shadow layer to switch from outer to inner.
What is spread radius?
Spread radius controls how far the shadow extends beyond the element before it starts blurring. Positive values make the shadow bigger than the element; negative values make it smaller. Spread is useful for creating glowing effects (high spread, low blur) or very tight dark outlines.
Is my CSS saved anywhere?
No. Everything runs entirely in your browser. The shadow values, colors, and generated CSS are never sent, stored, or logged. Close the tab and nothing is retained.
Do box shadows hurt performance?
Box shadows are GPU-accelerated in all modern browsers, so they perform well even on mobile. However, very large blur values (100px+) on many elements can slow down rendering. For animations, prefer transform and opacity over animating shadows directly — those are more performant.
How do I use the generated CSS?
Copy the box-shadow line from the output, then paste it into any CSS rule targeting the element you want to style. For Tailwind, you can use the arbitrary value syntax: "shadow-[0_4px_6px_rgba(0,0,0,0.1)]" — works inline with the Tailwind class system.