Box Shadow Generator

Create CSS box shadow values visually and copy ready-to-use CSS instantly.

Shadow Settings

Customize shadow

Adjust each property and preview the CSS box shadow in real time.

Horizontal Offset

-50px50px

Vertical Offset

-50px50px

Blur Radius

0px100px

Spread Radius

-50px50px

Opacity

0%100%

Shadow Color

Choose any color for the shadow.

#0f172a

Shadow Presets

Quick styles

Live Preview

The preview updates instantly when you change any shadow property.

Preview Box

Adjust the controls to customize this shadow.

0px

12px

30px

Blur

-5px

Spread

CSS Code

box-shadow: 0px 12px 30px -5px rgba(15, 23, 42, 0.2);

Use the visual controls to change offset, blur, spread, color and opacity.

See how the box shadow looks instantly on the preview card.

Copy the generated box-shadow property and use it directly in your CSS.