Shadows & Blurs

Shadows and blurs add depth and emphasis to UI elements.

Global Foundations

Overview

Shadows and blurs are visual effects used to create depth, emphasis, and a sense of hierarchy within a user interface.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8atCSov6KVkMchm0ZT8zeZ%2FShipfaster-UI---v2.7-(LIVE)%3Fnode-id%3D6-15%26t%3DyF0ezYHZKJLOnkyp-1

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.
Previous

No previous post
Up next

No next post