All Collections
Layout and Design
Creating & Editing Blurs
Creating & Editing Blurs
Updated over a week ago

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.

Did this answer your question?