Box Shadow Generator
Create layered CSS box-shadows with live preview, presets, and instant code. 100% client-side.
Shape
Background
Radius16px
Generated CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10);
Layer #1
Layer #2
⚡ Presets
Card
Material
Tailwind
Button
Focus
Glow
Inset
Neumorphism
Realistic
🔒 100% private: All generation happens in your browser. Your shadow is never sent to any server.
About Box Shadow Generator
CSS box-shadow adds depth and elevation to web elements — buttons, cards, dropdowns, and modals. A box-shadow has up to six values: horizontal offset (x), vertical offset (y), blur radius, spread radius, color, and an optional "inset" keyword. Getting the numbers right by hand is tedious: a subtle card shadow might be "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)", and designers rarely guess these values accurately. This tool lets you build shadows visually: drag the sliders, see the effect live, and layer multiple shadows to create realistic depth. Includes presets from Material Design, Tailwind, and popular design systems.
How It Works
- Adjust the sliders: X offset, Y offset, blur, and spread.
- Pick a shadow color and opacity.
- Toggle "inset" for an inner shadow.
- Add multiple shadow layers to stack depth.
- Copy the generated CSS and paste it into your stylesheet.
✨ Key Features
- ✓Adjustable X/Y offset
- ✓Adjustable blur and spread
- ✓Custom color + opacity
- ✓Inset (inner shadow) toggle
- ✓Up to 5 stacked shadow layers
- ✓Live preview (light and dark backgrounds)
- ✓20+ curated presets (Material, Tailwind, neumorphism)
- ✓Generated CSS with multiple layers
- ✓Copy CSS with one click
- ✓Adjustable preview element (card, circle, button)
- ✓100% client-side — no data sent to any server
🎯 Common Use Cases
- →Designing shadows for cards and modals
- →Creating elevation systems for a design system
- →Neumorphism (soft UI) effects
- →Button hover shadows
- →Dropdown and popover shadows
- →Creating focus rings
- →Building a consistent shadow scale
- →Learning CSS box-shadow syntax by experimenting
💡 Advanced Tips & Pro Insights
- ▸For realistic depth, use multiple layers: a tight dark shadow near the element plus a wider, softer shadow underneath. Example: "0 1px 3px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.08)".
- ▸A shadow with no blur (blur = 0) and small spread looks like a hard edge — useful for offset "button press" effects.
- ▸For neumorphism, use two shadows — one light (top-left), one dark (bottom-right) — both inset and outset, with the background color slightly off-white.
- ▸Shadows inherit the border radius of the element. Add border-radius for smoother shadows on rounded cards.
- ▸For glow effects, use a large blur with the same color as the element (e.g., "0 0 20px rgba(14,165,233,0.5)" for a blue glow).
- ▸Rendering cost: many shadows with large blur radii are expensive on lower-end devices. Keep shadow blurs under 50px for performance.
Frequently Asked Questions
Is this box shadow generator free?▾
Yes, this box-shadow generator is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All generation happens in your browser. Nothing is uploaded to any server.
What is a CSS box-shadow?▾
A CSS box-shadow adds a shadow around an element. It takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional "inset" keyword (for inner shadows).
What do the values mean?▾
X offset: horizontal shift (positive = right). Y offset: vertical shift (positive = down). Blur: softness of the shadow (larger = softer). Spread: expand/contract the shadow. Color: shadow color (with opacity). Inset: shadow inside the element.
How do I create realistic depth?▾
Use multiple shadows. A small, tight, darker shadow creates contact depth. A wider, softer, lighter shadow creates the overall elevation. Combine 2–4 layers for a natural look.
What is neumorphism?▾
Neumorphism (or "soft UI") is a design trend where UI elements appear extruded from the background. It uses two shadows — one light (top-left), one dark (bottom-right) — and a background color very close to the element's color.
Why is my shadow cut off?▾
If the parent container has "overflow: hidden" or the element has limited padding, the shadow may be clipped. Add padding or remove overflow restrictions.
Can I animate a box-shadow?▾
Yes — box-shadow is animatable. A common technique is transitioning on hover: "transition: box-shadow 0.2s ease" and changing the shadow on :hover for a lift effect.