CSS Shadow Generator

Create beautiful CSS shadows visually. Adjust sliders, add multiple layers, and copy the generated CSS.

Shadow Settings

X Offset 5px

Y Offset 5px

Blur 15px

Spread 0px

Color

Opacity 20%

Inset

Layers

CSS Shadow Properties

The CSS box-shadow property adds shadow effects to elements. The syntax is: box-shadow: [inset] x-offset y-offset blur spread color. You can layer multiple shadows by comma-separating values. CSS also supports text-shadow for text and filter: drop-shadow() for non-rectangular elements. This tool focuses on box-shadow — the most versatile shadow property.