Blur
Figma
Guidelines
Web
MobileBlur refers to a visual effect that softens the appearance of an element by creating a gradient transition between its edges and the background or between different parts of the element itself. It’s commonly used to reduce visual clutter, focus attention on a specific area, or create a sense of depth and hierarchy.
In user interfaces, blur effects can enhance readability by muting background content behind modal windows, notifications, or important actionable items, thereby drawing the user’s focus to the foreground elements. Additionally, blur can add a stylistic, atmospheric quality to designs, contributing to a more refined and polished user experience.
Guidelines
Correct / Incorrect
Use blur effects focus attention on key elements and enhance readability.
Not using blur effects can make the background too distracting and reduce the readability of the text.
Takeaways
- Blur effects shouldn’t be used to mask poor design decisions or low-quality images.
Usage
Implementation
Properties
Blur
Type : CSS Class
