🍋 Design Tools
Shadow System Generator
Generate elevation shadow systems in Material, Tailwind, or custom style
chars
words
sentences
lines
Options
Results
Result
About Shadow System Generator
Create consistent shadow/elevation scales for your design system. Material Design, Tailwind, or custom progressive shadows with CSS output.
Step by Step
- 1 Choose a shadow style: Material, Tailwind, or custom
- 2 Set the number of elevation levels (1-10)
- 3 Customize shadow color and maximum blur (for custom style)
- 4 Copy the CSS custom properties or individual shadow values
Tips
- Material Design uses multi-layer shadows that look more natural
- Tailwind's shadow scale (sm to 2xl) covers most use cases
- Use darker shadows sparingly — subtle shadows create depth without heaviness
- Export as CSS custom properties to maintain consistency across components
Frequently Asked Questions
What is a shadow elevation system?
An elevation system is a set of progressively stronger shadows that represent different levels of depth. Components closer to the user (like modals) use higher elevation shadows than static content.
How many shadow levels do I need?
Most design systems use 4-6 levels: none (0), subtle (cards), medium (dropdowns), large (modals), and extra-large (popovers). Material Design defines up to 24 levels but most apps use fewer.