Shadow Studio
Professional CSS Shadow Generator
Quick Presets
Stack
Properties
Layer 1
Offset
0
10
Distribution
15
-3
Appearance
0.10
Understanding CSS Shadows
The box-shadow property allows you to cast drop shadows from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.
Layering Shadows
Professional UI design rarely uses a single shadow. By stacking 2 or 3 shadows with different blurs and opacities (as this tool does by default), you create a much more realistic depth effect, often called "Elevation".
Performance
Box shadows are cheap to render, but large blur radiuses or too many layers can slow down scrolling on mobile devices. Use simpler shadows for complex lists.
Advertisement