What Is Card UI Shadow Elevation?
In Material-style UI, how far an element appears to float above the page is expressed as an elevation value, and the shadow's offset, blur, and opacity scale with it. This calculator turns a chosen elevation level into a ready-to-use box-shadow value.
How It's Calculated
As elevation increases, the shadow's vertical offset and blur radius both grow, and the shadow's opacity darkens along with them. Opacity is capped at 0.28 so the shadow never looks overly heavy even at high elevation.
Applying It in Practice
Regular cards look natural at an elevation of 2-4, while elements that need to float above everything else — modals, dropdowns — work better at 8 or higher. On dark backgrounds like dark mode, slightly lowering the calculated opacity keeps the shadow from standing out too harshly.
Frequently Asked Questions
Use a higher elevation for elements that should feel more important or float above the page. Regular cards typically use 2-4, while floating elements like modals or popovers use 8-16 or more.
Yes, you can copy the calculated box-shadow value straight into your card component. On dark backgrounds, slightly lowering the opacity tends to look more natural.