We're all familiar with Apple's classic blur effects. They'll have featured content, like a title, on top of a blurred background with the colors/shapes from the content underneath just peaking through. A great example is your phone's control center (the actions that open when you swipe down from the top right corner). Apple calls these materials.

Materials create a visual separation between the background and foreground layers using blur and translucency. They're used to create subtle hierarchy in your design.

Material Thickness

Apple offers several different system materials, each with a different thickness ranging from Ultra Thin to Chrome (essentially Ultra Thick). The thinnest material will allow the users to see more of the background content, whereas the thickest material shows less.

The thickness of the material makes a big difference in its appearance, so as you might expect, there are different use cases depending on the thickness.

Using thinner materials gives the users more context to what the background content is, so you'll want to use a thin material when that context is helpful for the user know. For example, if a user is looking for more information on a location, knowing that they're still on the map page is good context. In this case, you should use a thinner material, like Ultra Thin, as opposed to a thick material, like Chrome.

On the other hand, using thicker materials shows less of the background content, which creates more contrast between the foreground and background. This makes text or other foreground details more visible.

In the example below, the map sheet's subtitles need to be legible, so the contrast the Chrome material provides is a much better fit than the Ultra Thin material.

Vibrancy

Another way to improve legibility is to add vibrancy (also called Foreground). Vibrancy dynamically pulls color from the background into the foreground content. This helps make sure that the foreground content isn't too light, dark, or saturated when compared to the translucency of the material blur.

There are several "levels" of vibrancy that range from more vibrant, i.e. more colors are brought through, to less vibrant, i.e. less colors are brought through. The options are primary, secondary, tertiary, and divider.

Typically, primary vibrancy should be used for text, but you'll want to create different material/vibrancy combinations based on what looks best for your design. Once you've found a combination, we recommend using that consistently across all similar purposes in your app.

For example, if you have one "like" button with a Thick material and primary vibrancy, all your "like" buttons should have a Thick material and primary vibrancy. This keeps your app consistent even when system settings change.

Using Materials in Play

Play makes it super easy to add and customize materials, in addition to other blur options like Layer Blur and Progressive Blur. Select the object you'd like add a material to expand the Blur Panel from the right hand attribute panels. You can then customize your blur!