Layers
Layers are sets of styles that can be applied to any container. They separate the container visually from its background content.
Blur
Blur layers simply apply a blur effect to the container's background. Usually, a glass layer should be used, but blur is available for cases where a custom background color needs to be applied in combination with the blur effect.
blur.50
blur.100
Glass
Glass layers apply a glass effect to the container's background. Glass is
usually applied to containers on top of media such as images. Use glass.50
for
smaller elements, such as Badge, and
glass.100
for larger elements, such as Toast
and cards.
glass.50
glass.100
Dark
glass.50
glass.100
Usage
React
Layer styles can be applied using the layerStyle
prop on any component. The
available layer styles are:
blur.50
- Light blur effectblur.100
- Strong blur effectglass.50
- Glass effect for smaller elementsglass.100
- Glass effect for larger elements
The glass layer styles respect color mode.
Blur
Blur should always be used in combination with a translucent background color.