What is pass-through blending?

Figma, Photoshop, XD, and Affinity Designer all contain a blending mode called “pass-through”. Blending modes determine how a layer or group will be mixed with everything underneath.

Their names typically describe the formulas used to mix the colours. For example, “multiply” multiplies each channel of the layer being blended with everything below. Pass-through is different. Pass-through alters how the layer tree is collapsed. It’s not really a blending mode at all, but a change in blending behaviour for groups and their child layers. Because of this, pass-through only makes sense and can only be applied to groups. To understand pass-through, we need to first take a look at how layer trees are typically collapsed in design tools.

Groups and normal blending #

With normal blending, the contents of a group are merged into a single image before being blended with what’s below. In the example below, the ellipse and star are combined before being blended with the rectangle.

A purple star on top of a blue circle on top of a red rectangle

In cases where normal blending is used for the group and all the contents, it will look the same as if there was no group at all. Visually, the example below looks the same as the one above.

A purple star on top of a blue circle on top of a red rectangle

But, if we change the star to use multiply blending, it’s now obvious that there is a difference. The group is containing the multiplied layer to just the group. The purple star is not being multiplied with the red rectangle outside the group. This is because the contents of the group is merged into a single image before being blended with what is below.

A purple star making a blue circle darker, on top of a red rectangle

Groups and pass-through #

When pass-through blending is used on a group, the rendered result is as if the group didn’t exist. The group is not merged into a single image before being blended with everything underneath. This means the group is just being used for layer panel organisation, and not altering the compositing behaviour at all.

A purple star making a blue circle and red rectangle darker

Pass-through blending lets objects contained in the group with non-normal blending modes affect layers outside the group. Our purple star with a multiply blending mode can darken the red rectangle, while still being inside the group. This is not possible if the group’s blending mode is normal, but is possible if the group’s blending mode is pass-through.

Figma and pass-through layers #

In Figma, it’s possible to use pass-through as the blending mode for a vector layer. Yes, on a layer! I know I previously said pass-through blending was just for groups. In Figma’s compositing, layers are treated like groups, and the various fills and layer effects act as their children. The behaviour matches everything noted above for groups.

In the example below, the red drop shadow on the star is using a multiply blending mode. It appears red on the underlying objects, because the entire layer is being is merged into a single image before being blended with what’s below.

Figma showing a purple star with a red drop shadow

If we change the purple star’s blending mode to pass-through, the shadow now darkens the layers below. Note how Figma changes the icon from an empty water drop to a half filled water drop when a non-normal blending mode is used. This can be handy when debugging issues.

Figma showing a purple star with a red drop shadow

Photoshop, Sketch, and layer style blending #

Photoshop’s drop shadow and other layer styles behave a bit differently to Figma. There’s no pass-through blending mode for Photoshop layers — the blending control for the layer sets the blending mode for the fill portion of the layer only. This means layers styles are always passed-through. This is also how Sketch behaves. At this point, XD has no blending mode support for shadows and layer styles.

Photoshop showing a purple star with a red drop shadow

Published 20 April 2021.