🌑
CSS box-shadow Generator
Adjust the shadow with sliders and copy the CSS code instantly.
Settings
0px
10px
30px
-8px
35%
CSS
box-shadow: 0px 10px 30px -8px rgba(236, 72, 153, 0.35);광고
The box shadow generator lets you adjust a shadow's direction, blur, spread, color, and opacity with sliders, showing a live preview alongside the generated CSS box-shadow code.
Layering shadows for depth
A single shadow can look flat, but layering a close, sharp shadow with a distant, soft one creates a sense of depth as if the element sits under real lighting.
Frequently Asked Questions
Can I just paste the generated code directly?
Yes — copy the generated box-shadow value and paste it into your target element's CSS to get the exact shadow shown in the preview.
How do I create an inset shadow?
Toggle the inset option to create a shadow that appears to sink inward rather than project outward from the element.
Ad
광고