Generate CSS box shadow

Create CSS box-shadow layers for elevation, inset states, and colored effects.

freeworks offlinenothing uploaded
ToolCSS Box Shadow Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Offsets, blur, spread, color, and inset are serialized into box-shadow functions. Blur and spread change the painted shadow shape but not the element’s layout box.

  • Small blur and neutral offset suit soft elevation.
  • Inset and multiple layers remain optional.

Worked example

Subtle card shadow
Generate a soft drop shadow for a card component
Input
											Offset x: 0
Offset y: 2
Blur: 8
Spread: 0
Color: rgba(0, 0, 0, 0.15)
Inset: false
Output
												/* Box Shadow */
.shadow {
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}

When to use this

Cards, pressed buttons, and design mockups generate shadow layers.

Edge cases

  • Negative spread shrinks the shadow before blur.
  • Inset paints inside the padding edge.
  • A transparent shadow remains in the property but is invisible.

References