Shadows & Blurs
Shadows and blurs add depth and emphasis to UI elements.

Shadows & Blurs
Coming soon
New
components
,
variants
,
22
styles
Shadows & Blurs
Global Foundations
Overview
Shadows and blurs are visual effects used to create depth, emphasis, and a sense of hierarchy within a user interface.
When should you use them?
Use shadows and blurs to highlight important elements, create a sense of depth, and improve visual hierarchy.
How should you use them?
- Use subtle shadows to create a natural sense of depth.
- Apply blurs to background elements to emphasize foreground content.
- Ensure shadows and blurs are consistent with the overall design style.
- Avoid overusing these effects, as they can make the interface look cluttered.
- Test the effects on different devices to ensure they render well.
No previous post
No next post