UI Shadow Scale Generator
Set the shadow ingredients, inspect the progressive elevation preview, and copy CSS tokens for your interface.
Adjust the controls to update the scale.
Design aid only: this does not guarantee accessibility or visual quality. Check the tokens in your product.
A QUICK WALKTHROUGH
How to use this tool
- Choose a base color, blur, spread, opacity, and number of levels.
- Review the stacked preview and generated token declarations.
- Copy the CSS and check each shadow against your actual surface, contrast, and interaction states.
A visual starting point
The generator creates layered box-shadow values with increasing offset, blur, and opacity. Use the result as a design aid and tune it against your own surfaces and components.
Local and copyable
All calculations and previews happen in this browser. The output is plain CSS custom properties that you can paste into a stylesheet.
Design aid only
This preview does not guarantee accessibility, contrast, visual quality, or suitability for every display and background. Test the tokens in your product and provide non-shadow cues for important states.
GOOD TO KNOW
Common questions
How are levels increased?
Vertical offset, blur, and opacity grow with each level. The values are intentionally simple starting points for a consistent elevation system.
Does a shadow communicate accessibility by itself?
No. A shadow is a visual design aid, not an accessibility guarantee. Pair important states with text, borders, color, or other clear cues.
Is my input uploaded?
No. The preview and CSS are generated locally in this browser.