Box Shadow Generator
Visually build and copy CSS box-shadow code
0
4
12
0
20
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
What is this tool?
Visually builds a CSS box-shadow effect with live preview controls for offset, blur, spread, color, and opacity, and generates the corresponding CSS code.
How to use it
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.
More from Design & Color:
Advertisement