CSS Box Shadow Generator

What box-shadow actually does

CSS box-shadowpaints a shadow around an element. It does not affect layout — the shadow lives outside the box model, so it never pushes siblings or changes the element's own dimensions. This makes it the cheapest, safest depth effect in the CSS toolbox: no extra DOM nodes, no positioning gymnastics, no layout thrashing on hover.

The syntax has five parameters plus an optional inset keyword:

box-shadow: <x> <y> <blur> <spread> <color> [inset];

// Examples
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.5);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);

The five parameters

• X offset — horizontal distance of the shadow from the box. Positive = shadow to the right. Negative = shadow to the left. A real drop-shadow has X near 0 (light is overhead); for side-lit effects, use small non-zero values
• Y offset — vertical distance. Positive = shadow below. Negative = shadow above. Most UI shadows have Y of 1–10px (small) to 20–30px (dramatic lift effects)
• Blur radius — how soft the edge is. 0 = sharp, pixel-perfect edge. 20px = substantial blur, diffuse shadow. As a rule of thumb, keep blur ≥ |Y offset| for natural-looking drops — tight blur with big offsets looks like a second box, not a shadow
• Spread radius — how much the shadow grows or shrinks before blurring. Positive values expand the shadow outward; negative values shrink it(a common trick for tight, focused shadows that don't fan out). Most production shadows use negative spread with larger blur to get the "tight top, diffuse bottom" look
• Color — any CSS color. Hex, named, rgb, rgba, hsl, hsla, oklch. For realistic shadows, use alpha (like rgba(0,0,0,0.1)) — pure black shadows look fake because real shadows take on the color of the surrounding ambient light. Low alpha (0.05–0.15) is almost always correct
• inset (keyword) — if present, the shadow is drawn inside the box instead of outside. Use for pressed-button effects, inner borders, and the neumorphism style

Layering multiple shadows

The real secret to professional-looking shadows is stacking multiple layers. A single shadow almost always looks fake — real objects cast several shadows at once (hard contact shadow underneath, soft ambient shadow further out). Comma-separate multiple shadow values:

box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.12),   /* close, tight, contact shadow */
  0 1px 2px rgba(0, 0, 0, 0.24);    /* slightly more diffuse */

Most modern design systems (Material Design, Tailwind, Shopify Polaris, Atlassian) use 2–3 layered shadows for every elevation level. This tool supports up to 6 layers, which is enough for anything short of true 3D rendering.

How to use this tool

1. Pick a preset — Subtle lift / Pronounced drop / Soft glow / Inset ring / Layered depth / Neumorphism — each loads a professional-quality multi-layer shadow into the editor
2. Adjust sliders for X, Y, blur, spread on each layer. Changes preview instantly
3. Change the color with the native color picker or edit the raw rgba value directly in the text field — useful for fine-tuning alpha
4. Add more layerswith "+ Add layer" (up to 6) for more realistic depth. Remove individual layers with the ✕ button
5. Toggle inset on any layer to draw that shadow inside the box instead of outside
6. Switch the preview background between light, dark, and checker. Dark mode helps check whether your shadow still works on dark UIs (hint: pure black shadows disappear)
7. Copy the result in three formats: Copy CSS (full box-shadow: …; line), Copy value only (just the shadow value), Copy as Tailwind (arbitrary-value syntax for Tailwind v3/v4)

Rules of thumb for believable shadows

• Blur ≥ |Y offset|. A shadow with 0 10px 5px looks like a stray duplicate, not a shadow. Use 0 10px 20px for a smoother, more natural effect
• Low alpha. Real shadows cost the scene ~10-20% of the ambient light, not 100%. rgba(0,0,0,0.1) is a great default; rgba(0,0,0,0.25) is the upper limit for most cases
• Y near 0 for flat designs. Modern flat UIs use shadows that are centered ( 0 0 20px) for a soft ambient glow, or shifted down ( 0 4px 6px) for a subtle ground-plane hint. X offset is almost always 0 because the imaginary light source is directly overhead
• Negative spread for "tight top" shadows. A shadow with 0 10px 20px -5px starts narrow at the top of the box and widens as it fans down — the most natural drop shadow shape. Positive spread creates a halo effect instead
• Stack 2 layers for card elevation: one tight contact shadow (0 1px 2px rgba(0,0,0,0.06)) and one diffuse ambient shadow ( 0 4px 12px rgba(0,0,0,0.05)). This is the Tailwind shadow-md pattern
• Colored shadows for emphasis. Adding hue (especially matching the element's own brand color) makes shadows feel intentional. A blue button with a faint blue glow underneath reads as "this button belongs to this brand"

Inset shadows: pressed, etched, and neumorphic

The inset keyword flips the shadow from outside to inside. Uses:

• Pressed button effect: on the :active state, swap a normal drop shadow for an inset shadow. The element looks like it sank into the page
• Inner border (ring): an inset shadow with zero blur and positive spread creates a crisp inner line — effectively a border that doesn't affect layout. Tailwind's ring-* utilities work this way
• Neumorphism: the 2020-era soft-UI style uses two inset shadows (one light from top-left, one dark from bottom-right) to make elements look extruded from a fabric-like background. Try the "Neumorphism" preset to see the recipe
• Etched text frame: combine a light-colored top-inset with a dark-colored bottom-inset to make a label look engraved into the surface

Performance notes

Shadows are fast — they're composited on the GPU as part of the normal paint phase. A couple of gotchas:

• Animating shadow is expensive. Each frame requires repainting the shadow pixels from scratch. For hover transitions, animate transform instead (which is GPU-only) or cross-fade between two elements with different static shadows
• Huge blur radii tank performance. A shadow with 200px blur on a large element can drop the frame rate on low-end devices. Keep blur ≤ 50px for UI elements
• Many layers compound. Six layers on every element in a long list will be visibly slower to scroll than two. If you have a grid of 100 cards, 2 shadow layers is plenty — don't copy a 6-layer preset onto every card
• will-change: transform helps when animating shadows, but only apply it to a handful of elements. Blanket application wastes GPU memory and can backfire

box-shadow vs filter: drop-shadow

CSS has two ways to draw shadows: box-shadow and filter: drop-shadow(...). They look similar but do different things:

• box-shadowdraws a shadow around the element's border box — a rectangle with rounded corners if border-radiusis set. It does NOT follow transparency in the element's content. If you put a box-shadow on a PNG with transparent areas, the shadow is still rectangular
• filter: drop-shadowdraws a shadow around the element's actual visible pixels. A drop-shadow on a transparent PNG follows the non-transparent pixels. A drop-shadow on an SVG follows the actual path shapes. This is the right choice for irregular shapes

Use box-shadow for boxes, cards, buttons, inputs, modals — anything with a rectangular bounding box. Use filter: drop-shadow for icons, logos, PNG/SVG images with transparency, and any element where you want the shadow to hug the visible content rather than the bounding box.

Privacy

Shadow generation is pure CSS-string building. No color you pick, no slider you drag, is sent to a server. The preview renders locally using your browser's native CSS engine. Safe for unreleased brand work and private design systems.

Frequently asked questions

Why does my shadow look fake?

Four likely reasons: (1) alpha too high — drop it from 0.5 to 0.1. (2) Blur too low relative to Y offset — increase blur until it's ≥ the Y value. (3) Only one layer — add a second softer layer for ambient light. (4) Pure black — try a dark gray or a tinted color matching your design's ambient hue.

How do I get the Material Design elevation shadows?

Material Design 2 elevation shadows are 3 layers per level. The "Layered depth" preset is close but not exact. For the real values, Google publishes them at material.io; you can hand-type them into this tool as 3-layer shadows.

Can I use box-shadow for a glow effect?

Yes — use X and Y of 0, a large blur (30–60px), and a colored rgba (like rgba(99,102,241,0.5)). The "Soft glow" preset shows the pattern. Stacking 2–3 glow layers with different blur sizes gives a more natural halo.

Does Tailwind have a built-in box-shadow?

Yes — Tailwind ships with shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, and shadow-none. For custom shadows, use arbitrary values: shadow-[0_4px_6px_rgba(0,0,0,0.1)]. The "Copy as Tailwind" button in this tool produces that syntax with underscores replacing spaces (Tailwind's convention for arbitrary values)

How do I animate box-shadow on hover?

Technically: transition: box-shadow 200ms ease; plus a different shadow in the hover state. But for performance, prefer to animate transform: translateY(-2px) instead of the shadow itself — the transform is GPU-accelerated, the shadow repaint is not. A subtle lift-on-hover is better achieved with transform.

Can I use oklch or lch colors?

Yes — modern browsers (2023+) support oklch() and lch() wherever colors are accepted, including in box-shadow. This tool uses rgba for compatibility with the widest range of targets, but you can manually edit the color field to oklch(50% 0.2 240 / 0.3) or similar if your project has adopted them

Is my data sent anywhere?

No. The tool is pure CSS-string building running in your browser. No telemetry, no analytics on the shadow values you pick, no logging. Close the tab and everything is gone.