---
title: "CSS Box Shadow Generator"
description: "Free CSS box-shadow generator. Stack up to 5 shadow layers with x, y, blur, spread, color, opacity, and inset controls. Live preview, copy ready-to-ship CSS."
url: https://devzap.io/tools/box-shadow-generator/
category: css
status: live
pricing: Free
---

# CSS Box Shadow Generator

> Stack multiple shadow layers and copy production-ready CSS. Inset, spread, opacity — all dialed in live.

Free CSS box-shadow generator. Stack up to 5 shadow layers with x, y, blur, spread, color, opacity, and inset controls. Live preview, copy ready-to-ship CSS.

## How to use

1. **Add up to 5 layers** — Each layer accepts x/y offset, blur radius, spread, color, opacity, and inset toggle.
2. **Tweak in the live preview** — Adjustments to any layer reflect immediately in the preview rectangle. Toggle inset to switch between cast shadows and inner shadows.
3. **Copy the box-shadow declaration** — One click copies the full declaration ready to paste into your CSS or a Tailwind utility.

## FAQ

### Why use multi-layer shadows instead of just one?

Real-world shadows aren't a single blur — light bounces and creates a sharp close-shadow plus a softer ambient one. Stacking two or three layers (one tight, one soft, one optional inset rim) produces the realistic 'elevated' effect popular in modern UIs.

### What's the difference between blur and spread?

Blur softens the edges of the shadow. Spread enlarges or shrinks the shadow's footprint without softening it. Use spread to make a sharp shadow extend further; use blur to make a soft glow.

### When should I use inset shadows?

Inset shadows live inside the box, useful for pressed-button effects, inner glow rings, or carved-in card states. Stack a regular shadow with an inset rim for a bevel effect.

### Can I save shadow presets?

Not yet. We're keeping the tool stateless and shareable via copy/paste. If you want to bookmark a shadow, copy the declaration into your design tokens file.

## Background

## Multi-layer shadows are how modern UIs feel real

If your shadow looks fake, the issue isn't the radius — it's that you only have one. A realistic elevation in 2026 design uses two or three layered shadows: a tight, low-opacity shadow that hugs the element to imply contact with the surface, and a wider, more diffuse shadow that suggests ambient occlusion further away.

Material Design and HIG both build their elevation tokens this way. So does every popular design system shipping in 2026.

## A practical recipe

Start with two layers:

- **Layer 1**: 0px x, 1px y, 2px blur, 0 spread, color matching the surface, ~10% opacity.
- **Layer 2**: 0px x, 8px y, 24px blur, -4px spread, same color, ~12% opacity.

That gives you a believable elevation that scales — push y and blur higher for "lifted higher" states.

## Use cases

- **Card states**: stack three layers for resting / hover / focus.
- **Buttons**: a sharp inset shadow turns into a "pressed" state on click.
- **Modal overlays**: a heavy soft shadow grounds the modal above the page.
- **Skeleton placeholders**: a soft inset shadow signals empty space.