There are three different types of blur you can add to your design in Play: Material, Progressive, and Layer. Each can be added to any layer, but Material Blur and Progressive Blur cannot exist on the same object at the same time.
Material
Applying Material properties to an object allows you to see some of the content behind the object through a blurred material. A common technique for using material blur is to pin the background image to the stack/page or pin the foreground content to the stack/page. That way they’re overlapped and you achieve the desired effect!
Materials will not work on an object with an opaque background color. You'll need to set the background to either "Clear" or a lower opacity color, created as a style.
Blur Effect
Use the Blur Effect property to select your desired blur from a list of built-in blurs (Extra Light, Light, Regular, Prominent, or Dark) or Apple’s system materials (Ultra Thin, Thin, Regular, Thick, and Chrome).
If you use one of Apple’s system materials, two additional properties will be enabled, Foreground and Appearance.
Foreground
The Foreground property lets you add vibrancy to your material by pulling the background colors through to the foreground. You can add various levels of vibrancy like Primary, Secondary, Tertiary, and Divider. Primary will pull the most amount of color through, whereas Tertiary will pull the least.
Appearance
You can further customize the appearance of the material by changing its UI appearance to dark mode, light mode, or auto, which inherits the system's default mode.
Progressive Blur
Radius
Adjust how blurred the most blurred part of the layer is. The bigger the radius is, the more blurred that area will be. A radius of zero will not show any blur.
Intensity Map
Choose the type of shape the blur should move along. The options include:
Linear Vertical - Gradient moving from the most blurred at the top to not blurred at the bottom
Linear Horizontal - Gradient moving from the most blurred on the left to not blurred on the right
Radial - Gradient moving from the most blurred in the center to not blurred around the outside
Angular - Gradient moving from the most blurred at 0º to not blurred at 360º
Invert
You can change the direction of the blur by turning on the Invert property. For example, if you’ve inverted your Progressive Blur, the Intensity Maps will not display as:
Linear Vertical - Gradient moving from the most blurred at the bottom to not blurred at the top
Linear Horizontal - Gradient moving from the most blurred on the right to not blurred on the left
Radial - Gradient moving from the most blurred around the outside to not blurred in the center
Angular - Gradient moving from not blurred at 0º to the most blurred at 360º
Layer Blur
You can also blur an object itself, rather than blur what is behind the object, by turning on a Layer Blur.
Radius
Adjust how blurred the layer is. The bigger the radius is, the more blurred the layer will be. A radius of zero will not show any blur.