Material properties are applied to an object and allow 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.

You can add one of two material blurs to objects: System Materials or Blur. They're both properties in the Materials pop-up.

Turning on the System Material property disables the Blur property and enables the Thickness property to use Apple’s system materials (Ultra Thin, Thin, Regular, Thick, and Chrome) instead. These materials blur the object’s background similar to the Blur property.

If the object has a material thickness selected, the Foreground and Appearance properties are enabled. 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.

You can further customize the appearance of the material by changing it's UI appearance to dark mode, light mode, or auto, which inherits the system's default mode.