Box Shadow Generator
Build a CSS box-shadow with sliders and a live preview.
Adjust offset, blur, spread, color, and opacity with sliders and a live preview, then copy the finished CSS box-shadow declaration.
Reading the box-shadow CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
| Value | Meaning |
|---|---|
| 0px | Horizontal offset — positive moves the shadow right |
| 4px | Vertical offset — positive moves the shadow down |
| 12px | Blur radius — bigger is softer |
| 0px | Spread — grows or shrinks the shadow |
| rgba(0, 0, 0, 0.15) | Color, here black at 15% opacity |
Ready-made shadow styles
| Style | CSS |
|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.12) |
| Raised card | 0 4px 12px rgba(0,0,0,0.15) |
| Floating panel | 0 12px 32px rgba(0,0,0,0.18) |
| Pressed button | inset 0 2px 4px rgba(0,0,0,0.2) |
Tips for natural-looking shadows
- Keep opacity low. Real shadows are soft; 10–20% black usually looks better than a solid dark gray.
- Light comes from above. A small downward Y offset with no X offset looks the most natural.
- Higher means softer. To make an element look further off the page, increase the offset and the blur together.
- Layer two shadows — a small, sharp one plus a large, soft one — for realistic depth.
- Tint it. On a colored background, a darker shade of that color often looks better than gray.
Frequently asked questions
What does "inset" do?
It flips the shadow to render inside the element's border instead of outside, creating a pressed-in or carved-out look.
Can I stack multiple shadows?
Yes — click "Add shadow" to layer additional shadows on top of each other, a common technique for more realistic depth.
What's the difference between blur and spread?
Blur softens the shadow's edges — higher values fade out more gradually. Spread expands or contracts the shadow's size before blurring is applied.
Why does my shadow look cut off?
A parent element with overflow: hidden clips anything outside its box, including shadows. Add some padding to the parent or remove the overflow setting.