Box Shadow Generator

Visually build CSS box-shadow effects with multiple layers, live preview, and one-click copy or download.

css box-shadow shadow generator blur spread opacity inset layers
Free Client-Side Private
Presets
Shadow Layers
Preview Options
Background
Box size
Element fill color
CSS Output
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

What is a CSS Box Shadow?

The box-shadow CSS property adds one or more shadow effects to an element's box. Each shadow is defined by an X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword to create inner shadows.

How to Use

  1. Adjust the Shadow Layers sliders to set the horizontal (X) and vertical (Y) offset, blur, and spread.
  2. Pick the shadow color and set its opacity using the slider.
  3. Enable Inset to make the shadow appear inside the element instead of outside.
  4. Click Add Layer to stack multiple shadows for richer effects.
  5. Use the Presets for instant starting points — Subtle, Elevated, Floating, Sharp, Inset, or Glow.
  6. Copy the CSS Output directly, or click Download CSS to save a ready-to-use stylesheet.

Shadow Presets

  • Subtle — very light single shadow for low-elevation cards
  • Elevated — two-layer Material Design-style shadow
  • Floating — soft double shadow suggesting a high-lift element
  • Sharp — hard shadow with zero blur for a flat-design look
  • Inset — inner shadow for recessed or pressed states
  • Glow — colored glow effect using spread and soft blur

FAQ

What does the Spread value do?

Spread expands or shrinks the shadow before blur is applied. A positive value makes the shadow larger than the element on all sides; a negative value shrinks it. Use negative spread with blur to create a soft shadow that only appears on one side.

Can I stack multiple box shadows?

Yes — click Add Layer to add up to 6 shadow layers. CSS renders them in order, front to back. Multi-layer shadows are output as a comma-separated list in the CSS property.

What is an inset shadow?

An inset shadow is drawn inside the element's border box instead of outside. It is useful for creating the appearance of a pressed button, a recessed panel, or inner depth. Toggle Inset on any layer to switch it.

Does this work with border-radius?

Yes. Use the Border radius slider in the Preview Options to round the corners of the preview box. The box-shadow CSS property automatically follows the element's border-radius in all modern browsers.

How do I use the generated CSS?

Copy the box-shadow property from the output and paste it into your CSS rule. For example: .card { box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25); }. The Download CSS button gives you a .element {} block ready to rename and use.

Report an issue