# CSS Box Shadow Generator

> Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

- URL: https://generate.now/box-shadow
- Category: color
- Price: free, no account required
- AI-powered: no
- Last updated: 2026-08-27

## What it does

Compose box shadows visually. Stack multiple layers, tweak offset, blur, spread, color, and opacity for each, and watch the preview update live. Output as plain CSS or as a Tailwind arbitrary value. Common shadow presets are one click away.

## When to use it

- Find the right elevation for a card without 5 minutes of trial and error
- Build a layered shadow that doesn't look like a default Material drop
- Translate a Figma shadow effect into CSS for production
- Get the Tailwind arbitrary-value form of a custom shadow

## Examples

### soft elevation, 4px y-offset, 16px blur, 8% opacity

```
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.08);
```

A subtle card-elevation shadow.

### two-layer crisp shadow

```
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08);
```

A near-surface highlight stacked with a softer ambient layer.

### focus ring, 3px accent at 40% opacity

```
box-shadow: 0 0 0 3px rgba(163, 230, 58, 0.4);
```

Zero offset and zero blur turns box-shadow into a ring that ignores the layout box.

### pressed state for a button

```
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
```

An inset shadow along the top edge reads as the surface being pushed in.

## Frequently asked questions

### What is shadow spread?

Spread grows (positive) or shrinks (negative) the shadow before blur is applied. A positive spread creates a halo; a negative spread keeps the shadow inside the element's bounds.

### Should I use inset shadows?

Inset shadows render inside the element. They're useful for pressed-button affordances and neumorphic effects, but readable depth usually comes from outset shadows.

### How do I avoid the 'AI default' shadow look?

Single hard shadows tend to look generic. Stack two or three layers — a tight near-surface shadow plus a softer ambient one — and bias the color slightly toward the surrounding hue instead of pure black.

### How do I make a shadow that still reads in dark mode?

Black shadows disappear against dark surfaces because there's nothing left to darken. Two things work instead: a hairline border a little lighter than the surface, or an inset highlight along the top edge that mimics a light source. Keep the drop shadow too, but expect it to do almost none of the work.

### What's the difference between box-shadow and drop-shadow?

box-shadow follows the element's border box, so a transparent PNG casts a rectangular shadow. filter: drop-shadow() follows the alpha channel, so it traces the actual shape — the right choice for logos, icons, and cutouts. drop-shadow has no spread parameter.

### Do box shadows hurt performance?

Large blur radii are expensive to repaint, and the cost scales with the blurred area rather than the element size. One big shadow is fine; dozens animating at once is not. If you need a shadow to change on hover, cross-fade a second pre-rendered layer's opacity rather than animating the shadow values.

## References

- [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) — MDN Web Docs. Reference for offset, blur, spread, inset, and multi-shadow syntax.
- [CSS Backgrounds and Borders Module Level 3](https://www.w3.org/TR/css-backgrounds-3/) — W3C. The specification that defines how box shadows are painted and layered.

## Related tools

- [Glassmorphism Generator](https://generate.now/glassmorphism): Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.
- [CSS Animation Generator](https://generate.now/animation): Build CSS @keyframes animations visually. Pick a preset or design your own — duration, easing, iteration. Live preview, CSS + Tailwind output.
- [Color Picker & Converter](https://generate.now/color): Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.