CSS box shadow generator

Create multi-layer CSS box-shadow values with live preview, inset toggles, and precise controls.

Layers 1

Select a layer to edit its parameters, or add, reorder, and remove layers to build the final shadow stack.

Layer settings
Layer 1
px
px
px
px
%

Preview

Copy the box-shadow value into your CSS.

box-shadow
CSS output
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

What is box-shadow?

box-shadow is a CSS property that draws one or more shadows behind or inside an element.

Each shadow layer combines horizontal and vertical offsets, a blur radius, an optional spread radius, and a color with alpha. Add inset to turn the layer into an inner shadow.

Multiple layers are comma-separated, which lets you stack subtle shadows for depth, glow, or crisp edges without changing your layout.

  • Use small offsets with larger blur values for soft elevation.
  • Use higher opacity with lower blur values for sharper edges.
  • Combine outer and inner shadows when you need more perceived depth.
  • Keep the layer count modest when performance matters.

How to use

Add and reorder shadow layers, adjust each layer's offset, blur, spread, color, opacity, and inset mode, then copy the generated box-shadow declaration.