CSS Box Shadow Generator

What is CSS box-shadow?

The CSS box-shadow property adds one or more shadow effects around an element. It's one of the most-used CSS properties in modern web design because shadows establish depth, hierarchy, elevation, and focus on a flat page. Every modern UI library — Material Design, Tailwind, Bootstrap, iOS Human Interface Guidelines — uses layered box-shadow as a core elevation system. This free generator builds multi-layer shadows (the secret to realistic depth) with live preview on both light and dark backgrounds, and exports as CSS or a Tailwind arbitrary value.

Why layered shadows look more realistic

A single CSS shadow with one offset/blur looks artificial — real objects cast shadows from many angles and falloff rates. The pros stack 2-4 shadows with progressively larger offsets and softer alpha. The "Material" and "Smooth XL" presets above show this technique. For a hero card or modal, try 3 layers: a tight 1-2px ambient shadow at 4% opacity, a medium 8-16px shadow at 6%, and a long 32-64px shadow at 10% to simulate a soft light source.

Box shadow syntax

box-shadow: [inset] x-offset y-offset blur spread color [, layer-2, layer-3...];

Frequently Asked Questions

How do I make a subtle shadow?

Use a small y-offset (1-4px), moderate blur (3-12px), no spread, and a low-opacity black color (e.g. #0000001a = 10% black). This creates the natural floating-card effect used by Stripe, Linear, Vercel, and most modern SaaS UIs.

Can I have multiple shadows on one element?

Yes — and you should, for any shadow larger than "subtle". Add layers with the "Add layer" button above. The generator emits them as comma-separated values: box-shadow: 0 1px 3px #0001, 0 10px 30px #0002;. Layered shadows render as a single composite shadow at GPU level with no performance cost vs. a single shadow.

What's the difference between blur and spread?

Blur controls how soft the shadow edge is — higher blur = more diffuse, like a light source farther away. Spread controls how large the shadow is in all directions before blur is applied — positive spread makes the shadow bigger, negative spread makes it smaller (useful for pulled-in glow effects). Most designers leave spread at 0 and adjust blur and color.

What does "inset" do?

inset flips the shadow inside the element instead of outside. This creates pressed-button, recessed-input, or sunken-panel effects. The neumorphic design trend uses combinations of inset and outer shadows to create soft 3D surfaces.

How do I use this with Tailwind CSS?

Tailwind v3+ supports arbitrary box-shadow values: className="shadow-[0_4px_12px_#0002]". Use the "Copy Tailwind" button above — it formats the value with underscores (Tailwind's way of escaping spaces in arbitrary values) so you can paste it directly into your component.

Does box-shadow affect element size or layout?

No. Shadows render outside the element's box-model boundaries and don't push neighbors. They don't trigger layout reflow when added/changed — they only repaint, which is GPU-accelerated. Safe to animate with transition: box-shadow 200ms ease.

Why use box-shadow over filter: drop-shadow?

box-shadow respects the element's rectangle (or border-radius). filter: drop-shadowfollows the actual painted pixels — useful for irregularly shaped elements like SVG icons or transparent PNGs, but more expensive to render. For rectangular elements, always use box-shadow.