Effects

At Leverage, we incorporate a background-blur effect on certain elevated navigation elements—such as the top-navigation-bar, bottom-navigation-bar, and Client Area or IB Dashboard’s sidebar—to create a modern, glassmorphism-like appearance similar to that seen in Vision Pro interfaces. This effect is achieved by combining a precise background-blur filter with translucent background colors (using classes like bg-elevated-surface and bg-elevated-surface-2).

Tokens

token-name

glassmorphism/regular-32

glassmorphism/subtle-24

glassmorphism/minimal-16

Do's & Don'ts

In most cases, achieve the glassmorphism look by using the dedicated color background bg-elevated-surface and bg-elevated-surface-2.

In most cases, achieve the glassmorphism look by using the dedicated color background bg-elevated-surface and bg-elevated-surface-2.

In most cases, achieve the glassmorphism look by using the dedicated color background bg-elevated-surface and bg-elevated-surface-2.

Warning

If you still wish to apply the effect in areas with text, use a solid background color as a container for the text—but apply this sparingly to maintain clarity and legibility.

Warning

If you still wish to apply the effect in areas with text, use a solid background color as a container for the text—but apply this sparingly to maintain clarity and legibility.

Warning

If you still wish to apply the effect in areas with text, use a solid background color as a container for the text—but apply this sparingly to maintain clarity and legibility.

Dont's

Don’t use glassmorphism effect on text-heavy elements as it may hinder readability and legibility.

Dont's

Don’t use glassmorphism effect on text-heavy elements as it may hinder readability and legibility.

Dont's

Don’t use glassmorphism effect on text-heavy elements as it may hinder readability and legibility.

Effects

Tokens

Do's & Don'ts

On This Page