Skip to main content

Blur

Effect applied to a container to distort its background and create visual hierarchy.

Alias blur tokens

Each blur token should be used in combination with the recommended container fill pairing.

Example Description Token name
  • Blur base Used for strong attention to the foreground content and minimise background detail. It should always be used in conjunction with $container-base tokens. Global token used: $blur-uniform-48
    $blur-base
  • Blur neutral Used for when some background detail still needs to be perceived without being a distraction. It should always be used in conjunction with $container-neutral tokens. Global token used: $blur-uniform-18
    $blur-neutral
  • Blur prominent Use for visible and striking background blur effect. It should always be used in conjunction with $container-prominent tokens. Global token used: $blur-uniform-25
    $blur-prominent
Back to top