Set values
Adjust offsets, blur and colour.
Code & Data Tool
Box Shadow Generator
Generate CSS box-shadow code from simple values.
Loading workspace...
About this tool
What is Box Shadow Generator?
Box Shadow Generator creates CSS box-shadow code from simple values with a visible preview.
Useful when you need to
- Add depth to a card
- Style a button
- Learn how shadow values work
How to use
How to use Box Shadow Generator
01 02 Preview
Check the shadow.
03 Fine tune
Adjust until it looks right.
04 Copy
Copy the CSS.
Tips
Get better results
- Subtle shadows usually look better than heavy ones.
- Test against your page background.
FAQ
Frequently asked questions
What do the numbers mean?
Horizontal offset, vertical offset, blur and colour.
Is it private?
Yes.
Can I add several shadows?
You can combine them manually in CSS.
More practical guides · File handling and privacy · Report an incorrect instruction