Glass

Partially transparent white or black backgrounds that have a blur filter applied. These can be used as 'glassmorphic' overlays.

• bg-black-glass-1 / bg-black-glass-2 / bg-black-glass-3 / bg-black-glass-4 / bg-black-glass-5
• bg-white-glass-1 / bg-white-glass-2 / bg-white-glass-3 / bg-white-glass-4 / bg-white-glass-5

Note: Browsers that don't support background-blur filters (Firefox, older browsers) will simply get a partially transparent tint instead.

Glass over a darker background image

Dark glass glass-black-* utilities over a darker background image:

-1

-2

-3

-4

-5

Light glass glass-white-* utilities over a darker background image:

-1

-2

-3

-4

-5

Glass over a lighter background image

Dark glass glass-black-* utilities over a lighter background image:

-1

-2

-3

-4

-5

Light glass glass-white-* utilities over a lighter background image:

-1

-2

-3

-4

-5