CSS Box Shadow Generator
Visual builder for CSS box-shadows. X, Y, blur, spread sliders; per-layer color + alpha; inset toggle; stack up to 4 layers; 8 presets. Copy the CSS in one click.
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
Free. Runs in your browser. No signup.
About this tool
WRRK's box-shadow generator builds production-ready CSS box-shadow values with full control over X/Y offsets, blur radius, spread, color, alpha, and inset placement. Every setting is a slider with a numeric readout, so you can match a design spec exactly — no guessing.
The headline feature is shadow stacking. Real-world shadows are layered: a tight, dark close shadow plus a softer, wider ambient one. Single-shadow CSS looks flat; stacked shadows look premium. The tool lets you stack up to 4 layersand ships with eight presets — Soft, Card, Float, Pop, Inset, Neon, Hard, and Stack — that show common patterns from Material Design, Apple, and Stripe. Tweak the preview's box color, background, and border radius to test how the shadow reads on the real surface where you'll use it. Everything runs in your browser; the CSS works in every modern browser without prefixes.
How to build a box shadow (5 steps)
- Tune the offset. Drag X (horizontal) and Y (vertical) sliders to position the shadow. Most natural shadows use X=0 and Y=4 to 20 to suggest light from above.
- Soften with blur. Increase blur to soften the shadow's edge. Low blur = sharp shadow; high blur = ambient glow. Spread grows the shadow before blur is applied.
- Pick color and alpha. Black at 8-15% alpha is the design-system standard. For brand glows, use a saturated color at 40-60% alpha.
- Stack layers. Click 'Add shadow' to stack up to 4 layers. Combine a sharp close shadow with a soft ambient one for the layered look used by Stripe, Apple, and Material.
- Copy the CSS. Click 'Copy CSS' to grab the box-shadow declaration. Paste into your stylesheet, Tailwind arbitrary value, or inline style.
When to use a box shadow
- Cards and tiles — separate them from the page background
- Buttons — show hover/press states with a shifted shadow
- Modals and popovers — push them visually above the rest of the UI
- Inset shadows — for pressed buttons and recessed input fields
- Neon/glow effects — a saturated color shadow with no offset
- Neumorphism — paired light + dark shadows on the same color background
- Replacing borders — soft 1px shadows look cleaner than hard borders on cards
Frequently asked questions
+−What's the difference between blur and spread?
Blur softens the shadow's edge — higher blur, fuzzier shadow. Spread grows or shrinks the shadow before blur is applied — positive values make it bigger than the box, negative values make it smaller. Blur affects how soft, spread affects how big.
+−When should I use inset shadows?
Inset shadows render inside the element instead of around it — perfect for pressed-button states, sunken input fields, or recessed panels. Toggle 'Inset' on a layer to switch. You can mix inset and outer shadows in the same stack.
+−Why do designers stack multiple shadows?
Real-world shadows aren't single blobs — they're a sharp close shadow plus a softer ambient one. Stacking 2-4 shadows with different y-offsets, blurs, and alpha values creates the layered, premium look used by Material Design, Apple, and Stripe. Try the 'Float' or 'Stack' presets to see the pattern.
+−How do I create a glow effect?
Set X and Y to 0, push blur high (20-40px), and use a saturated color with 40-80% alpha. Stack two layers — one tighter, one wider — for a more cinematic glow. The 'Neon' preset shows the recipe.
+−Are box shadows expensive for performance?
Large blur values (50px+) and shadows on many elements can hurt scroll performance, especially on low-end devices. Mitigate by: using transform-based animations (not shadow animations), promoting layers with will-change: transform, or replacing complex shadows with a pre-rendered SVG/PNG when possible.
+−Can I use this with Tailwind CSS?
Yes — copy the value and apply via arbitrary syntax: shadow-[0_4px_12px_rgba(0,0,0,0.08)]. For multi-shadow stacks, define a custom shadow in tailwind.config.js or use a CSS variable. Tailwind's built-in shadow-sm/md/lg/xl scale is great for defaults but lacks fine control.
+−Is the generator free? Any signup?
Free, no signup, browser-only. The CSS it produces uses standard syntax that works in every modern browser without prefixes.