Box Shadow Generator

Build CSS box shadows visually — adjust offset, blur, spread, and opacity.

BG
Box
Radius12px
Shadow 1
X0px
Y4px
Blur20px
Spread0px
Opacity25%
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);

Box Shadow Generator — What It Does

Build CSS box-shadow declarations visually. Adjust horizontal/vertical offset, blur radius, spread radius, color, and opacity with sliders and a color picker. Stack multiple shadow layers. Toggle inset mode. Copy the ready-to-use CSS.

Box Shadow Syntax Reference

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

  • offset-x — Positive = right, negative = left
  • offset-y — Positive = down, negative = up
  • blur-radius — 0 = sharp edge; higher values = softer, more diffused shadow
  • spread-radius — Positive = shadow larger than element; negative = smaller
  • inset — Keyword that flips the shadow inside the element

Popular Shadow Recipes

  • Subtle card shadow — 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
  • Elevated modal — 0 25px 50px -12px rgba(0,0,0,0.25)
  • Colored glow — 0 0 20px rgba(99,102,241,0.5)
  • Pressed button inset — inset 0 2px 4px rgba(0,0,0,0.2)

Frequently Asked Questions

What do the box-shadow parameters mean?
The syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Offset-x/y position the shadow. Blur-radius controls softness (0 = sharp). Spread-radius expands or shrinks the shadow. Inset makes it inside the element.
How do I create a realistic elevation shadow like Material Design?
Use low opacity (20–30%), a slight downward Y offset, and a blur radius 2–4× the offset distance. Darker shadows (rgba(0,0,0,0.3)) at small offsets simulate close objects; lighter shadows with large blurs simulate height.
Can I stack multiple box shadows?
Yes. CSS box-shadow accepts a comma-separated list of shadows, rendered front-to-back (first listed = front). Use multiple layers to create complex depth effects like a soft ambient shadow plus a sharp directional shadow.
What is an inset shadow and when should I use it?
An inset shadow renders inside the element rather than outside, creating a pressed-in or sunken appearance. Useful for inputs, active button states, or inner glows.
Does box-shadow affect layout or trigger repaints?
Box-shadow does not affect layout (no impact on flow or dimensions), but it does trigger a repaint. For performance-sensitive animations, consider using filter: drop-shadow() instead, which can be GPU-accelerated.