undefined

undefined

It can be somewhat tricky to build the frosted glass effect correctly, and so we have included it for convenience as a mixin in the library. If you don’t use it your SASS compiler will not include it in the final stylesheet, so there is no downside to including it in the library.

To use the glass mixin simply apply it to any element:

@use 'src/bridge.scss' as *;

.card {
  @include glass;
  width: spacing(20);
  height: spacing(12);
}

This will generate a frosted glass card that looks like:

To make the effect a bit more obvious we will style the card a bit and add some elements behind the card so you can see the transparency effect working:

.card {
  @include glass;
  width: spacing(20);
  height: spacing(12);
  border-radius: spacing(4);
}