Blur
Effect applied to a container to distort its background and create visual hierarchy.
Background blur
The background blur is a visual effect used to distort the content behind the UI element where it’s applied. It helps to highlight the element in the foreground, making it stand out and grab the user’s attention.
Blur tokens
Using blur in your products
Here are some tips to keep in mind when using our blur tokens:
Combine blur with $content-solid tokens
To make sure the content is always legible and accessible use $content-solid tokens on the text and icons.
We don’t recommend using text with opacity as it can comprise accessibility and user experience. Learn more about the options available here.
Pair container fill and blur tokens
| Container fill token | Blur token | Recommended usage |
|---|---|---|
| It ensures strong attention is drawn to foreground content by minimising background detail. | ||
| Ideal for balanced background effects where you want a moderate level of obscurity. It allows some background detail to still be perceived without being a distraction. | ||
| Use for visible and striking background blur effect. This pairing is suitable for components where the blur effect is combined with a higher level of transparency as a fill, allowing the blur effect to stand out more. |