Tools Menu
Professional Tool
Box Shadow Generator
Generate CSS box-shadows visually. Adjust offset, blur, spread, and color.
#boxshadow
#cssshadow
#shadowgenerator
#dropshadow
0px
4px
10px
0px
Preview
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);How to Use This Tool
Follow these simple steps to get the most out of the Box Shadow Generator.
1
Use sliders to adjust X/Y offset.
2
Set blur radius and spread.
3
Pick a shadow color and opacity.
4
Copy the CSS.
0px
4px
10px
0px
Preview
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);Mastering Shadows
Shadows are a critical element in modern web design, adding depth, hierarchy, and affordance to your interface.
The Properties
- Horizontal/Vertical Offset: Moves the shadow relative to the element. Positive values move right/down, negative moves left/up.
- Blur Radius: Controls how sharp or soft the shadow edge is. Higher = softer.
- Spread Radius: Expands or shrinks the shadow size relative to the element size.
- Color/Alpha: The key to realistic shadows is transparency. Avoid pure black; use a dark shade of your background or brand color with low opacity (e.g., 10-20%).
Design Trends
- Soft Shadows: Large blur + low opacity creates a modern, floating effect common in SaaS dashboards.
- Neumorphism: Uses two shadows (one light, one dark) to make elements appear extruded from the background.
Related Arsenal
More specialized tools in the CSS & UI Tools category.