CSS Box Shadow Generator

Create CSS box shadows with a visual editor. Adjust offset, blur, spread, color and opacity. Support for multiple shadow layers.

Background

Box Color

Radius: 16px

Presets

Shadow Layers

Layer 1

Inset

X Offset

Y Offset

Blur

Spread

Color

Opacity: 30%

CSS Code

box-shadow: 0px 4px 20px 0px rgba(99, 102, 241, 0.30);

About CSS Box Shadow

The CSS box-shadow property adds shadow effects to elements. It accepts horizontal offset, vertical offset, blur radius, spread radius, color and an optional inset keyword. Multiple shadows can be layered for depth effects. This generator lets you visually design shadows and copy the CSS code.