CSS Box Shadow Generator

Design box shadows visually and get the CSS instantly. Supports multiple layers and preset styles.

Instant result Runs in browser

Tip: Use "Add Shadow" to build multi-layer shadows — ideal for realistic depth effects.

Preview

Preview background

Presets

How to use?

  1. 1
    Adjust the valuesSet X/Y offset, blur, spread, color and opacity. The preview updates instantly.
  2. 2
    Add multiple shadowsClick "Add Shadow" to layer additional shadows. Each layer is independently configurable.
  3. 3
    Copy the CSSCopy the generated CSS and paste it into your project. Both the full rule and value-only formats are supported.

FAQ

What do the box-shadow values mean?
The syntax is: offset-x | offset-y | blur-radius | spread-radius | color. Example: "4px 8px 16px 0px rgba(0,0,0,0.2)" means 4px right, 8px down, 16px blur, no spread, 20% black. The inset keyword moves the shadow inside the element.
Why use multiple shadows?
CSS box-shadow supports comma-separated multiple definitions. This creates layered, realistic depth effects. Material Design uses two layers: a large soft shadow (elevation) and a smaller sharp shadow (contact point).
What is browser support like?
box-shadow is fully supported in all modern browsers including Chrome, Firefox, Safari and Edge. No vendor prefix (-webkit-, -moz-) is required. IE 9+ has basic support.

What is CSS box-shadow?

The box-shadow property adds a shadow effect around an HTML element. It creates depth, elevation and layered effects without image files. Widely used for cards, buttons, modals and form elements.

Syntax

box-shadow: [inset] offset-x offset-y blur spread color;

  • offset-x/y: Horizontal and vertical position. Negative values shift left/up.
  • blur: Blur radius. Higher = softer; 0 = sharp edge.
  • spread: Expands or shrinks the shadow. Negative values contract it.
  • inset: Applies the shadow to the inner surface of the element.

Design Tips

Realistic shadows typically use two layers: a large, diffuse one for elevation and a small, sharp one at the contact point. Colored shadows matching your brand accent create a modern, distinctive look.

Comments