User Guide Cancel

Apply blend effects

Learn how best to work with blend effects to enhance your designs.

When working on images in your designs, you may want to go beyond a simple photo to create interesting and unique effects. For example, you may want to add your brand’s color as an effect on your images to create a visually appealing design. 

Blend modes allow you to automatically create composite image assets by combining an image layer with another layer using a set of pre-defined modes. 

Here are some sample effects created using Multiply, ScreenHard Light, Exclusion, and Luminosity blend modes.

Blend modes
Use blend effects to create magic with colors!

Curious about blend color terminologies?

  • The blend color is the original color of the selected object, group, or layer.

  • The base color is the underlying color in the artwork.

  • The resulting color is the color resulting from the blend.

The base and the blend color mix depend on the selected blending mode.

Blend terms

A. Blend color B. Base color C. Resulting color 

Want to create a blend effect?

  1. Before you begin, use these simple rules to understand how objects are handled when applying or modifying blend modes:

    • Appearance: applies and affects the whole object.
    • Master component: applies and affects all instances in your design project. For example, if you change the color of an object in the Master component, the change is cascaded across all instances in your design project.

    • Component instance: overrides the applied blend modes in component instances.
    • Repeat grid: applies on all the cells.
    • Interoperabilty: preserves the blend effect when working with Photoshop, Illustrator, Sketch, and After Effects.
  2. Select an image or object (including shapes, text layers, groups, masks, or components) on the design canvas. From the Property Inspector,  select and apply the blend mode of your choice. 

    You can also use Option Shift + / -  in MAC and Alt Shift + / - in WIN to toggle through the appearance levels of the applied blend modes.

  3. To preview the applied blend mode effect, select .

Limitations

Blend modes are not supported in these object behaviours:

  • Blend effects used in auto-animate change at the start of the transition without any animation.
  • You cannot apply blend effects on fills, borders, or shadows.

Examples 

Tutorials

Watch this video to learn how to blend the color of an object with the background color of an artboard or blend the colors of multiple objects layered on top of one another. 

Viewing time: 1 minute.


What's next?

We've got you started with blend modes in Adobe XD. The interface of Adobe XD is intuitive; we think you will find it easy to unleash your creativity with colors, blurs, and more.

Have a question or an idea?

Ask the Community

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.

Get help faster and easier

New user?