Free Tool
CSS Box Shadow Generator
Create CSS box shadows visually. Adjust offset, blur, spread, and color with live preview.
Presets
0px
4px
12px
0px
CSS
box-shadow: 0px 4px 12px 0px #00000020;What is CSS box-shadow?
The CSS box-shadow property adds shadow effects around an element. It is one of the most used CSS properties for creating depth and visual hierarchy in modern web design. Shadows can be applied outside (default) or inside (inset) an element.
Box shadow syntax
box-shadow: [inset] x-offset y-offset blur spread color;
| Value | Description | Default |
|---|---|---|
| inset | Makes the shadow appear inside the element | not set (outer) |
| x-offset | Horizontal position (positive = right) | 0px |
| y-offset | Vertical position (positive = down) | 0px |
| blur | How blurry the shadow is | 0px (sharp) |
| spread | How far the shadow extends | 0px |
| color | Shadow color (supports transparency) | currentColor |
Frequently Asked Questions
How do I make a subtle shadow?
Use a small y-offset (1-4px), moderate blur (3-12px), no spread, and a semi-transparent black color (e.g., rgba(0,0,0,0.1)). This creates the natural, floating card effect popular in modern UI design.
Can I have multiple shadows on one element?
Yes. Separate multiple shadow values with commas:box-shadow: 0 1px 3px #0001, 0 10px 30px #0002;. Layered shadows create more realistic depth.