Free Tool
CSS Shadow Generator
Design beautiful CSS box shadows with real-time preview. Layer multiple shadows, tweak every parameter, and export clean code.
1
Add shadow layers and adjust values
2
Preview on different backgrounds and shapes
3
Copy the CSS or Tailwind code
Shadow Layers
0px
4px
12px
0px
25%
Preview
Card Preview
Code Output
CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Tailwind CSS
shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.25)]
Shadow Presets
Save Your Shadow Settings
Get your shadow CSS code and related frontend tips delivered to your inbox.
or use email
Get this + weekly PM tools and templates.