Online Tool Store
· 4 min read
How to Create a Consistent CSS Shadow Scale
Manesh Jayawardhana
CIO & Co-founder
One card uses 0 2px 8px, a dropdown uses 0 10px 30px, and a modal has a dark halo copied from another project. Each component looks acceptable alone, but together the interface has no consistent sense of elevation.
A shadow scale generator creates several related levels from one base color and softness direction. The output is a starting system: designers still need to assign semantic roles, test dark mode, and check that focus indicators remain more important than decoration.
What designing elevation shadows as a system instead of isolated values involves
UI shadows suggest separation from a surface through offset, blur, spread, and color. A scale changes those properties gradually so low-elevation elements feel closer and high-elevation overlays feel farther away. The levels should be related, not merely larger random values.
Elevation is contextual. A dropdown may need to clear nearby content, while an inset panel may need no outer shadow at all. Use tokens such as --shadow-sm, --shadow-md, and --shadow-lg, then map components to those tokens rather than editing values per component.
| Stage or Case | Best Action | Why It Helps | Watch Out |
|---|---|---|---|
| Small | Subtle cards or controls | Gentle separation | Avoid on every element |
| Medium | Menus and popovers | Clear local elevation | Check nearby clipping |
| Large | Dialogs and overlays | Strong separation | Keep opacity restrained |
| Focus state | Keyboard navigation | Use outline or ring | Do not rely on shadow |
Apply the scale to real components before adopting it. A low elevation might suit a resting card, a middle level a dropdown, and the strongest level a modal, but those roles must remain consistent across the interface. Compare adjacent levels against both light and dark surfaces and check whether borders or background changes communicate hierarchy more reliably. Strong blur and opacity can make a product feel hazy, while tiny dark shadows can resemble dirty outlines. Store the copied declarations as named design tokens rather than scattering raw values through component files. That makes it possible to tune the entire system later without hunting down dozens of nearly identical box-shadow rules.
Document which token belongs to cards, menus, dialogs, and temporary overlays. Developers can then choose by meaning instead of picking whichever shadow looks strongest in an isolated component.
Why people get stuck here
- Every developer invents a new shadow for each component.
- Higher elevation becomes darker instead of broader and more natural.
- Shadows that work on white look muddy in dark themes.
- A box shadow is used as the only keyboard focus indicator.
The interface can make the mechanics faster, but it cannot supply missing context or make the final judgment. Define what a useful result means before accepting the first preview.
What a good solution looks like
Related levels
Offset, blur, and opacity should progress predictably across the scale.
Semantic tokens
Assign reusable names and document which components use each level.
Theme testing
Preview the scale on real light and dark surfaces, not only a neutral sample.
Common mistakes to avoid
- Creating more levels than the product can use consistently.
- Increasing opacity too aggressively at large sizes.
- Applying a shadow to every container.
- Forgetting overflow clipping on parent elements.
- Replacing accessible focus styles with decorative elevation.
Review the result in its real context before treating it as finished. If the task needs storage, collaboration, publishing, or a different method, use a more suitable option from the online tool directory.
How to do it with UI Shadow Scale Generator
Open the UI Shadow Scale Generator and work through the inputs in a deliberate order.
- Choose the base shadow color.
- Adjust the softness setting to fit the interface style.
- Review the generated elevation levels together.
- Check the scale on representative cards, menus, and dialogs.
- Select Copy CSS and place the tokens in the design-system stylesheet.
- Document component mappings and test light, dark, hover, and focus states.
The generator creates a compact browser-only set of CSS shadows and copies the result. It does not inspect your interface, choose semantic component assignments, test contrast, or replace accessible focus styling.
Frequently asked questions
How many shadow levels does a design system need?
Use only enough levels to express real elevation differences. Small products may need three or four; extra tokens without clear roles usually create inconsistency.
Should dark mode use the same shadows?
Often it needs adjustment because dark shadows have less visible contrast on dark surfaces. Borders, lighter highlights, or reduced opacity may communicate separation better.
Can a box shadow be a focus indicator?
A carefully designed focus ring can use shadow techniques, but it must remain clearly visible and meet accessibility needs. Do not confuse decorative elevation with focus state.
Final thought
Consistency matters more than finding one perfect shadow. Generate a restrained scale, map each level to a real interface role, and protect focus and contrast from decorative styling.