Vertical offset
Each level's shadow sits further below the element, growing at the rate you set.
Shadow Elevation System
Generate a layered set of box-shadow elevation levels for cards, modals and menus, tuned by color, opacity and growth rate.
Generate a layered set of box-shadow elevation levels for cards, modals and menus, tuned by color, opacity and growth rate.
An elevation system gives every floating UI surface, like cards, dropdowns and dialogs, a shadow depth that matches its visual importance, so users can read layering at a glance instead of every component inventing its own shadow.
Each level's shadow sits further below the element, growing at the rate you set.
Blur increases alongside the offset, so higher levels get a softer, more diffuse shadow.
Opacity gently decreases at higher levels so large shadows don't look too heavy.
Each level exports as its own CSS class, ready to apply to any component that needs that depth.
An elevation system is a consistent set of shadow styles representing how far each UI surface appears to float above the page, with higher levels using larger, softer shadows.
It controls how quickly the vertical offset and blur radius increase from one level to the next, so higher growth rates create more dramatic differences between levels.
Larger, more spread-out shadows can look too heavy at full opacity, so this tool gently reduces opacity as levels grow to keep every level looking natural.
Yes, pick any base color and the generated shadows will use it, which is useful for shadows that need to match a colored background.
Copy the output and paste the classes into your stylesheet, then apply a class like elevation-2 to any element that needs that level of depth.
More handy tools from My Panda Toolbox.