CSS
Box
Shadow
Generator

Generate CSS box-shadow values with visual controls, live preview, and one-click copy.

Shadow Layers

Layer 1

H-Offset0px
V-Offset4px
Blur6px
Spread-1px
Opacity20%
Color
Inset

Preview Settings

Box Color
Border Radius8px

Presets

Live Preview

CSS Output

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.2);

Learn more

How do a few numbers create the illusion of depth on a flat screen?

Was this useful?

Frequently Asked Questions

A CSS box-shadow consists of horizontal offset, vertical offset, blur radius, spread radius, and color. It can also be set as an inset shadow to appear inside the element.

Yes! You can add multiple shadow layers by separating them with commas in the CSS. Our tool allows you to add up to 5 layers visually.

Yes, the box-shadow property is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.