CSS Box Shadow Generator — Developer & Web Tools — Zapit
ZapitZapit

CSS Box Shadow Generator

Design box shadows visually and copy the CSS code.

Horizontal Offset4px
Vertical Offset4px
Blur Radius8px
Spread Radius0px
#000000
Opacity30%

CSS Output

box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.30);
Create CSS box shadows visually with real-time preview. Stack multiple shadow layers, control offset, blur, spread, color and opacity, and copy the CSS instantly.

Key Features

Live Preview
See the shadow rendered on a card in real time as you adjust sliders.
Multi-Layer Shadows
Add multiple shadow layers and combine them for depth effects.
Full Control
Horizontal/vertical offset, blur radius, spread radius, color, and opacity sliders.
Inset Shadows
Toggle inset mode to create inner shadows for pressed or sunken effects.
Presets
8 presets including Subtle, Hard, Neon, Floating, Layered and more.

How to Use

  1. 1Adjust the offset, blur, and spread sliders.
  2. 2Pick a shadow color and set opacity.
  3. 3Toggle Inset to create an inner shadow.
  4. 4Click "+ Layer" to add multiple shadow layers.
  5. 5Copy the generated box-shadow CSS.

Frequently Asked Questions