← All tools
// CSS

Box Shadow Generator online

Generate CSS box-shadow with live visual preview

CSS Box Shadow Generator logo
by
CHUNKY
MUNSTER
//Controls
// CSS

How to Use box-shadow-generator

  1. Adjust the horizontal offset, vertical offset, blur, spread, and colour sliders.
  2. Toggle inset shadow to create inner-shadow effects like pressed buttons.
  3. Add multiple shadow layers for advanced effects like layered depth.
  4. Click Copy CSS to get the ready-to-paste box-shadow declaration.

CSS box-shadow adds one or more shadow layers to an element, controlling offset, blur radius, spread, and colour. Used well, shadows create depth, focus, and polish. Overused, they date a design. This generator lets you tune all parameters with live preview and can stack multiple shadows — a technique used for smooth long-shadow and layered-glow effects.

box-shadow Parameter Reference

The syntax is: box-shadow: [inset] h-offset v-offset blur spread color. h-offset: positive is right, negative is left. v-offset: positive is down, negative is up. blur: 0 gives a hard edge; higher values produce a softer shadow. spread: expands (positive) or contracts (negative) the shadow. inset moves the shadow inside the element border. Multiple shadows are comma-separated.

Frequently Asked Questions

What is the difference between blur and spread?

Blur controls how soft the edge of the shadow is — a blur of 0 gives a hard crisp shadow. Spread controls the shadow's size relative to the element — a positive spread makes the shadow larger than the box; negative makes it smaller.

How do I create a soft elevation shadow like Material Design?

Use a low-opacity dark shadow with moderate blur and minimal spread — e.g. box-shadow: 0 4px 12px rgba(0,0,0,0.15). Stack two shadows (one tight/dark for definition, one large/light for ambient) for a realistic result.

Can I animate box-shadow with CSS?

Yes — box-shadow is animatable. However, animating it triggers paint (not just compositing), which can hurt performance on lower-end devices. Use opacity transitions with a pseudo-element shadow as a performance-friendly alternative for hover states.

Why is my shadow not showing?

Common causes: the element has overflow: hidden cutting off the shadow, the shadow colour is the same as the background, or the element has a transparent background letting the shadow show behind parent elements incorrectly. Check parent overflow settings first.

See also the CSS Gradient Generator, Border Radius Generator, and the full CSS toolkit.