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.
See how your shadows look on different elements
The key to realistic shadows is using multiple layers with proper opacity. Real shadows are complex - they have sharp edges close to objects and soft, diffused edges further away. Our generator lets you layer multiple shadows to achieve this realistic depth.
Opacity is what really lets us make good box-shadows by allowing us to layer the shadows. I recommend that you use a mix of opacities between .04 and 0.25. You can do so by using an rgba value of
rgba(0, 0, 0, 0.10)Material Design uses elevation levels from 1-24, each with specific shadow combinations. Use our Material Design presets to get the exact shadows specified in Google's design system. Higher elevation numbers create more pronounced shadows. You can copy the CSS here and use it in your own project.
Yes! Our generator provides clean CSS output with vendor prefixes for maximum browser compatibility. Simply click the copy button to get the complete box-shadow CSS property ready for your project. To see more in depth usage of the CSS, click on the CSS tab in the shadow builder.
Want to nerd out some more on Box Shadows? Take a read of this