Box Shadow Generator
Visually build and copy CSS box-shadow code
Files never storedRuns on your device
0
4
12
0
20
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
About Box Shadow Generator
Visually builds a CSS box-shadow effect with live preview controls for offset, blur, spread, color, and opacity, and generates the corresponding CSS code.
Adjust the sliders until the shadow preview looks right, then copy the generated CSS code into your project.
Subtle shadows (low opacity, moderate blur) usually look more modern and professional than large, dark, sharp-edged ones — it's easy to overdo a shadow effect without realizing it until you compare it against a more restrained version.
Watch: Box Shadow Generator in Action
- Should I use a strong, dark shadow for a modern look?
- Usually not — subtle shadows with low opacity and moderate blur tend to look more modern and professional than large, dark, sharp-edged ones. It's easy to overdo a shadow effect without realizing it until you compare it against a more restrained version.
More from Design & Color: