How to Use the CSS Box Shadow Generator

The box shadow tool starts with a single shadow layer. Use the sliders to set the horizontal offset (X), vertical offset (Y), blur radius, and spread radius in pixels. The Opacity slider controls the alpha channel of the shadow color. Toggle the Inset switch to turn the shadow from an outer drop shadow into an inner shadow that appears inside the element's border.

Click Add Shadow Layer to stack up to four independent shadow definitions. This is how complex card elevations, glowing borders, and pressed-button effects are built. Each layer has its own color, offset, and inset setting. Remove any layer with the ✕ button. When you're happy with the result, copy the complete box-shadow property with a single click.

What is CSS box-shadow?

The box-shadow property attaches one or more shadow effects to an element's bounding box. A single shadow is defined with up to six values: inset (optional keyword), horizontal offset, vertical offset, blur radius, spread radius, and color. All lengths accept any valid CSS length unit, though pixels are most common for predictable results.

The key insight is that box-shadow does not affect layout — shadows are painted outside the normal flow and do not push other elements around. This makes them ideal for adding visual depth without disturbing your grid or flexbox structure.

Single vs Multiple Shadows

A single shadow is sufficient for most use cases — a card lift effect, a subtle text input focus ring, or a dropdown menu indicator. Multiple shadows, separated by commas in the CSS value, are layered from front to back (the first value is closest to the element). Combining an outer ambient shadow with a tighter key shadow produces a more realistic, physically-accurate depth effect.

Multiple shadows also enable creative tricks: an outer glow (zero offset, large blur, vivid color), a colored border (zero blur, positive spread), and a pressed state (inset keyword) can all be combined on the same element simultaneously.

Inset Shadows Explained

Adding the inset keyword changes the shadow from an outer drop shadow to an inner shadow rendered inside the element's border. Inset shadows are perfect for simulating pressed or recessed UI states, inner vignettes on images, and soft hollow cutouts. A common technique is combining a regular outer shadow with an inset shadow — the outer shadow provides lift while the inset shadow adds inner depth.

Accessibility Considerations

Box shadows are purely decorative and have no semantic meaning to screen readers. However, they play an important role in focus management: :focus-visible combined with a high-contrast box-shadow ensures keyboard users can track the focused element. Avoid very low-contrast shadows to indicate interactive states — a clearly visible focus ring is required by WCAG 2.4.7 for keyboard accessibility.

Practical Examples

Card Elevation (Material-style)

.card {
  box-shadow: 0px 2px 4px rgba(0,0,0,0.12),
              0px 8px 24px rgba(0,0,0,0.10);
}

Button Press Effect

.btn:active {
  box-shadow: inset 0px 3px 8px rgba(0,0,0,0.25);
  transform: translateY(1px);
}

Glowing Accent

.glow {
  box-shadow: 0 0 20px rgba(108,99,255,0.6),
              0 0 60px rgba(108,99,255,0.2);
}

Colored Borderless Border

.outlined {
  box-shadow: 0 0 0 3px #6c63ff;
}