Learn how you can artfully add a blur mask to objects, or blur an entire object in Adobe XD.

You can blur objects or images on an artboard to emphasize or de-emphasize certain other elements on the artboard.

You can add blur effects in the following ways:

  • Create a blur mask to apply a blur effect to anything visible underneath
  • Add a blur effect to selected objects to blur the entire object

When you blur objects, the changes are non-destructive, and you can recover the original object or image that was blurred.

Blur specific areas of an artboard

To blur selected portions of an image, object, or area in the artboard, draw an object over the area you want to blur. Then use the Background Blur option in the Property Inspector. XD transforms the object into a blur mask and blurs everything underneath it.

  1. Draw a shape over the section of the object or image that you want to blur.

  2. Select Background Blur in the Property Inspector.

  3. Adjust the following sliders to control the background blur:

    • Amount: Controls the extent of the blur
    • Brightness: Controls the brightness of the blur mask
    • Opacity: Controls the opacity of the blur mask
    Blurring portion of an image
    Blurring portion of an image

  4. To show or hide the blur effect, select or deselect the check box next to Background Blur.

    To remove the blur, simply select the object (blur mask) and delete it.

Blur a selected object

To blur an entire object, select the object and use the Object Blur option in the Property Inspector.

  1. Select the object or image to which you want to add a blur effect.

  2. Select Object Blur in the Property Inspector.

    Select Object Blur in the Property Inspector
    Adding an object blur

  3. Adjust the slider to control the extent of the blur.

    Adjusting the blur of a selected image
    Adjusting the blur of a selected image

  4. To show or hide the blur effect, select or deselect the check box next to Object Blur.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy