CSS Box-Shadow Generator
The key to a good box-shadow is opacity and layers
I built this to be a better box-shadow generator. One that allows you to visualize how you'll use the shadow in your UI. This is why there are lots of settings and presets to help you.
This CSS generator allows you to specify multiple shadows and customize your viewing options. Customize the page background, the preview card colors, and view a grid of cards or a variety of 3 sizes.
This project is open-source. Please submit issues through GitHub.
Preview your box shadow
Shadow Builder
On/Off
Angle
Distance
Blur
Spread
Color
Opacity
Actions
Presets
Elevation 1
Elevation 2
Elevation 3
Elevation 4
Elevation 5
Elevation 6
Elevation 7
Elevation 8
Elevation 9
Elevation 10
Elevation 11
Elevation 12
Elevation 13
Elevation 14
Elevation 15
Elevation 16
Elevation 17
Elevation 18
Elevation 19
Elevation 20
Elevation 21
Elevation 22
Elevation 24