Shadow Generator

Stack multiple box-shadow or filter:drop-shadow layers with live preview

Stack multiple shadow layers to build depth effects. Use box-shadow for solid elements (supports inset and spread) or filter:drop-shadow for transparent shapes (PNG, SVG). Live preview updates as you tune each layer.

box-shadow

drop-shadow

Shadow layers

Blur

Spread

inset

Preview

CSS

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

How to use

Choose between box-shadow and drop-shadow mode using the segmented control.
Adjust offset X, offset Y, blur, spread, and color for the first shadow layer.
Click '+ Layer' to stack multiple shadows and configure each one independently.
Preview the combined effect on the live shadow preview box.
Copy the generated CSS declaration from the output section and paste it into your stylesheet.

Examples

Setting offsetY=4, blur=12, spread=0, color=rgba(0,0,0,0.15) produces a standard card shadow: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
Adding a second layer with offsetY=1, blur=3 and color=rgba(0,0,0,0.08) creates a layered depth effect popular in material-style UI.