What is a CSS box-shadow?

box-shadow attaches one or more drop shadows to an element. Each layer takes an offset (x, y), blur radius, spread radius and color. Multiple layers can be stacked for depth.

How do I make a soft, modern shadow?

Stack two or three layers with low opacity (5-15%), small offsets and large blur. The result is more realistic than a single hard shadow.

What is the difference between blur and spread?

Blur softens the shadow edge. Spread expands or shrinks the shadow before the blur is applied. Negative spread tightens the shadow.

Can I use this for text shadows?

Yes. Switch the mode to text-shadow. The same x, y, blur, and color controls apply (text-shadow has no spread).

CSS Shadows

Stack shadows like a designer.

Compose multi-layer box-shadows with live preview. Pick presets, tweak every axis, and copy production-ready CSS.

Box

Background

Radius 20px

Layers

Layer 1

inset

x 0pxy 4pxblur 8pxspread 0px

Layer 2

inset

x 0pxy 16pxblur 32pxspread -4px

CSS

box-shadow: 0px 4px 8px 0px #0000001a,
            0px 16px 32px -4px #7c5cff33;

Keep exploring

All tools →

Color Animation

CSS keyframes that cycle through palettes.

Open

Gradient Maker

OKLCH gradient stops, copy-ready CSS.

Open

CSS Patterns

Pure-CSS dots, stripes, grids, checkers.

Open