CSS Box Shadow Generator – Free Online Tool
Design CSS box-shadow effects with a visual editor and live preview.
0px
4px
12px
0px
40%
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.4);Example
Input
Offset X: 5px, Y: 5px, Blur: 15px, Color: rgba(0,0,0,0.3)
Output
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
The visual controls generate a CSS box-shadow declaration you can paste directly into your stylesheet.
How to Use CSS Box Shadow Generator
- 1
Adjust Controls
Use sliders to set offset, blur, spread, and color for the shadow.
- 2
Preview
See the shadow effect update in real time on the preview element.
- 3
Copy CSS
Copy the generated CSS box-shadow property.
Common Use Cases
- ✦Designing card hover effects
- ✦Creating depth in UI components
- ✦Building layered shadow effects for buttons
Frequently Asked Questions
Also available as
More CSS Tools
Visual CSS generators with live preview and copy-paste output.
▧ CSS Gradient Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator↔F CSS Clamp Generator
View all CSS tools