Free Developer Tool
Box Shadow Generator
Create modern CSS box shadows and copy the generated code instantly.
0px
10px
30px
0px
20px
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
What is Box Shadow Generator?
Box shadow generators simplify creating modern elevation and depth effects.
How to use
- Adjust shadow settings.
- Preview the shadow.
- Copy generated CSS.
Features
- Live shadow preview
- CSS export
- Blur and spread control
- Responsive interface
- Fast processing
Example
Input
x:0 y:10 blur:30
Output
box-shadow: 0 10px 30px rgba(0,0,0,.2);
FAQ
Can I create inset shadows?
Yes. Inset box shadows are supported.
Can I copy CSS code?
Yes. Generated CSS can be copied instantly.
Does this tool work on mobile?
Yes. The tool works on all modern devices.