Box Shadow Generator

`box-shadow` is the CSS property that paints a shadow around (or inside) an element. The syntax is `box-shadow: <x-offset> <y-offset> <blur> <spread> <colour>` — for example `box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.15)` is a clean drop shadow that sits 12px below the element. Add the `inset` keyword before the values to draw the shadow inside instead of outside. You can stack multiple shadows by separating them with commas, which is how designers build realistic layered depth.

**X offset** moves the shadow horizontally — positive pushes it right, negative pushes it left. **Y offset** moves the shadow vertically — positive pushes it down (the most common direction, since light comes from above), negative pushes it up. **Blur radius** controls how soft the edge of the shadow is — zero is a hard outline, larger values fade the shadow out gradually. **Spread radius** grows or shrinks the shadow before the blur is applied — positive makes the whole shadow larger, negative shrinks it so the shadow only shows under the element instead of leaking out the sides.

An **inset** shadow is drawn inside the element instead of outside, making the box look pressed-in or recessed. The CSS is the same four values but with the `inset` keyword in front: `box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1)`. Use inset for input fields (a tiny inset shadow at the top makes the control feel recessed), pressed button states, and skeuomorphic interfaces. Toggle the **Inset** switch in the generator and the preview will flip from outside the box to inside immediately.

**Blur** softens the edge — think of it as how far the shadow fades from solid to transparent. **Spread** grows or shrinks the entire shadow shape before blur is applied. A `0 4px 0 4px black` shadow is a hard 4px-wide ring around the element (no blur, +4 spread). A `0 4px 8px 0 black` shadow is a soft halo (8px blur, no spread). Negative spread is the secret trick designers use to make shadows feel tighter — it shrinks the shadow inward so it only shows below the element rather than leaking out the sides.

Soft shadows have **low alpha, large blur, and small offsets**. The default in this generator — `0 12px 24px 0 rgba(0, 0, 0, 0.15)` — is a good baseline. The rule of thumb is alpha 0.06–0.15 and blur roughly 2× the Y offset. Anything above 0.25 alpha starts to feel heavy. For an even softer look, pair a small tight layer (`0 1px 2px rgba(0, 0, 0, 0.06)`) with a larger diffused one (`0 12px 24px rgba(0, 0, 0, 0.1)`) — that's the Material Design / Linear / Vercel pattern.

Real light has two parts: **ambient** light (everywhere, soft, low contrast) and **direct** light (from one source, sharper). To fake that on screen, designers stack two shadows — a tight, small one for the direct contact below the element, and a larger, softer one for the ambient glow. Material Design's elevation tokens are always two-layer for this reason. Click **Add** in the generator to stack a second layer — the second layer defaults to a tight ambient shadow that pairs cleanly with the first. You can stack up to four layers.

For static UI, no — `box-shadow` is a paint-only effect that browsers handle efficiently, even with multiple layers. The cost shows up only when you **animate** a shadow on a large surface — every frame triggers repaint. If you need to animate a shadow on hover, animate `opacity` on a pseudo-element with the shadow pre-rendered, or animate a `transform` on a wrapper instead of the shadow itself. For comparison, `filter: blur()` is dramatically heavier than `box-shadow` because it blurs the entire element including its children — `box-shadow` only paints around the element's box.

Tailwind ships built-in shadow utilities — `shadow-xs`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl` — that map to common multi-layer shadows. For custom values from this generator, paste the arbitrary-value class shown in the **Tailwind** note below the CSS block: `shadow-[0px_12px_24px_0px_rgba(0,0,0,0.15)]`. For something you'll reuse, drop the shadow into your `tailwind.config.js` under `theme.extend.boxShadow`, e.g. `boxShadow: { card: '0 12px 24px 0 rgba(0, 0, 0, 0.15)' }`, and use `shadow-card` in your markup.

Open the colour picker in the **Colour** field and pick any colour — the shadow will tint to match. Coloured shadows are most useful for **brand accents** under primary buttons (a deep blue-tinted shadow under a blue button looks softer than pure black) and for **glow effects** (a saturated colour at zero offset and moderate blur creates a halo). Keep the alpha low (0.15–0.35) — fully saturated coloured shadows tend to look cartoonish on light backgrounds. On dark backgrounds, coloured shadows often need higher alpha to register at all.

Because shadow is darkness, and there's less light to take away on a dark surface. A `rgba(0, 0, 0, 0.15)` shadow that reads beautifully on white is almost invisible on `#0f0f0f`. In dark mode, either **bump the alpha higher** (0.3–0.5 is normal for dark UI) or **switch to a lighter shadow colour** so the shadow actually lifts the surface. Some designers use a faint white outline (`box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06)`) instead of a traditional dark shadow on dark mode — same elevation cue, easier to see.

Yes — completely free, no signup, no watermark, no rate limit. Everything runs in your browser. Nothing about your shadow is sent to a server, logged, or stored — refresh the page and it's gone. Bookmark the page if you want to come back.