Box Shadow Generator

Reading a CSS box-shadow by its parts

A box-shadow is a stack of four lengths and a color:offset-x offset-y blur-radius spread-radius color. The first two numbers push the shadow right and down (negative values go left and up). Blur softens the edge, so a larger blur spreads the shadow thinner and lighter. Spread grows or shrinks the shadow before the blur is applied, which is the knob people forget exists. Prefix the whole thing with inset and the shadow is painted inside the box instead of behind it, which is how you fake a pressed button or an inner groove.

Where it earns its keep

Elevation is the usual job: cards, modals, and dropdowns float above the page because a soft shadow implies distance from the surface. Shadows also separate a sticky header from scrolling content, outline a focused input, or build neumorphic buttons. You are not limited to one shadow either; comma-separate several and they layer from the first listed on top to the last on the bottom.

From subtle to dramatic

A gentle card lift, barely there:

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

A layered shadow reads as more realistic than one heavy blur, because real light casts both a tight contact shadow and a broad ambient one:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.16);

FAQ

Why does my shadow get clipped? A parent withoverflow: hidden cuts off anything painted outside its box, shadows included. Move the shadow to an element that is not clipped, or drop the overflow rule.

box-shadow or drop-shadow? box-shadowfollows the rectangular border box. The filter: drop-shadow()function follows the actual painted shape, so it is the one you want for a transparent PNG, an SVG icon, or an element with irregular corners.

Do shadows hurt performance? Static shadows are cheap. Animating blur or spread forces repaints every frame and can stutter; animate transform and opacityinstead, or swap between two prebuilt shadow values.