CSS Box Shadow Generator
Build layered shadows visually with live preview. Copy production-ready CSS instantly.
How to Use the Box Shadow Generator
Adjust the sliders to control each shadow's horizontal and vertical offset, blur radius, spread and color. Add multiple shadows by clicking "Add Shadow" and stack them for depth. Click a preset for instant styles, then copy the CSS to use in your project.
Layer Multiple Shadows
CSS box-shadow accepts a comma-separated list. Combine a large soft shadow with a small tight one for realistic depth.
Colorful Shadows
Matching the shadow color to your element's background adds vibrancy and a glowing effect without extra markup.
Inset Shadows
The inset keyword moves the shadow inside the element, perfect for pressed button states and sunken inputs.
Spread Radius
A negative spread value shrinks the shadow, letting you create a tight, precise shadow that doesn't bleed to the sides.
Frequently Asked Questions
box-shadow property adds one or more shadow effects to an element's frame. Each shadow is described by X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08);. Use the "Add Shadow" button above to build them visually.inset to a box-shadow draws the shadow inside the element rather than outside. It's commonly used for pressed button states, inner glows, or recessed card effects.rgba(0,0,0,…) to any color you like, for example rgba(0,111,212,0.3) for a blue glow. This tool's color picker lets you choose any color and set the opacity separately.