CSS Box Shadow Generator

Free tool No sign-up

Shadow Layers

L1 · y8 · b24 · 25%

Layer Settings

Offset X4px

Offset Y8px

Blur24px

Spread0px

Color

#000000%

Inset shadow

Presets

Generated CSS

box-shadow: 4px 8px 24px 0px rgba(0,0,0,0.25);

About this generator

Build production-ready CSS box-shadow declarations visually — adjust blur, spread, offset, color and opacity with a live preview, then copy the output. Toggle the preview shape between rectangle, circle, and pill to see how the shadow reads on different border-radius values before you ship.

The real power of box-shadow is layering. Material Design’s elevation system, every realistic floating-card UI, and the soft “natural light” look that makes a button feel premium — none of them are a single shadow. They’re 2-4 shadows stacked: a tight inner one for the contact shadow, a wider mid-tone for ambient occlusion, and sometimes a third diffuse one for the room glow. This generator’s ”+ Add Layer” button is the bridge between the Figma elevation token and the actual CSS that ships.

Two practical notes. (1) box-shadow follows the element’s bounding box, not the shape — for transparent SVGs and PNGs with cutouts, reach for filter: drop-shadow() instead, which follows the actual alpha channel. (2) For drop shadows on text, use the dedicated CSS Text Shadow Generator — text-shadow is a separate property with a slightly different parameter list.

Permalink: every adjustment you make is encoded into the URL hash, so you can bookmark a tuned shadow stack or send it to a teammate with a single share link.

?

How to use

01

Adjust the sliders

Drag Offset X/Y to position the shadow, Blur to soften edges, and Spread to grow or shrink it.

02

Pick a color

Open the color picker to choose any shadow hue, then set its opacity from 0–100%.

03

Toggle inset

Flip the toggle to switch between an outer drop shadow and an inner cut-in shadow.

04

Stack layers

Click "Add Layer" to combine multiple shadows. Layered shadows create realistic depth.

05

Try a preset

One click applies a ready-made configuration — Soft, Float, Glow, Layered and more.

06

Copy the CSS

Hit "Copy CSS" to grab the output and paste it directly into your stylesheet.

</>

CSS box-shadow syntax

Property	Description
`offset-x`	Horizontal distance — positive moves right, negative moves left.
`offset-y`	Vertical distance — positive moves down, negative moves up.
`blur-radius`	Higher = softer edge. 0 = sharp, hard shadow.
`spread-radius`	Grows (+) or shrinks (−) the shadow size before blur.
`color`	Any CSS color — use rgba() for transparent shadows.
`inset`	Optional keyword. Turns the shadow inward (inner shadow).

</>

box-shadow snippets

Basic

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

Inset

box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);

Multiple

box-shadow:
  0 1px 2px rgba(0,0,0,0.18),
  0 4px 8px rgba(0,0,0,0.12),
  0 16px 32px rgba(0,0,0,0.10);

drop-shadow

/* For SVG / transparent PNG cutouts use filter,
   not box-shadow — it follows the alpha channel: */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));

✓

Browser support

box-shadow is supported in every modern browser and has been since IE 9 — safe to use anywhere without a fallback.

Chrome v10+

Firefox v4+

Safari v5.1+

Edge v12+

IE v9+

✦

Pro tips

01

Never use pure black for shadows

Pure `#000` shadows look muddy because real shadows pick up the room's ambient light. Use a slightly hue-shifted dark — e.g. `rgba(15, 23, 42, 0.35)` (dark navy) for a bluish ambient, or `rgba(31, 17, 6, 0.35)` (dark brown) for warm interiors. The shadow reads as natural instead of placed.

02

Stack 2-3 layers for realistic depth

A single shadow looks flat. The "natural" floating-card look is two or three shadows: a tight, near-opaque contact shadow (1-2px blur), a mid-tone ambient (8-12px blur), and a soft diffuse glow (24-40px blur). Each layer drops in opacity as the blur grows.

03

Skip `spread` for realistic shadows

Real light doesn't spread — `spread > 0` makes a shadow grow uniformly outward, which never happens in physical reality. Reserve positive spread for stylized effects (glows, halos); use blur alone for anything photo-realistic.

04

box-shadow does NOT trigger layout

Unlike `outline` and `border`, `box-shadow` is painted outside the element's box without affecting layout — so adding a shadow on hover never shifts surrounding content. This is what makes it perfect for hover-lift animations without "click-jacking" the layout.

05

Avoid `will-change: box-shadow`

It tempting but counterproductive — `box-shadow` is already a paint-only property and the browser handles it fine on its own. `will-change: box-shadow` creates a compositor layer just for the shadow, which spikes memory and often makes animations LESS smooth, not more.

06

For SVGs and cutouts: filter: drop-shadow

box-shadow follows the element's rectangle, not its visible shape. On a transparent SVG icon or a PNG with cutouts, the shadow looks visibly wrong (a rectangle outline of the bounding box). Use `filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25))` instead — it follows the alpha channel.

See it used in real designs

Browse hand-coded collections that put this tool to work.

Components20 examples

20 CSS Cards with Animations

Components22 examples

22 CSS Stacked Card Designs

Components16 examples

16 CSS Floating Action Button Designs