Skip to content

Blend modes

Blend who?

Blend Modes determine how two graphics or colors blend together. Each blend mode has a different effect on the resulting blend.

Overview of supported blend modes

Examples
Normal Screen Overlay Darken
Normal: the white bottle sits fully opaque over the green splash background Screen: the bottle lightens until its label text almost disappears Overlay: the splash shows faintly through the bottle and the label turns yellow-green Darken: the darker green splash takes over the bottle, leaving only the cap clear
Lighten Color Dodge Color Burn Hard light
Lighten: the bottle keeps its white body and the darker splash stays behind it Color dodge: the bottle is blown out to near-white with a bright yellow band at its base Color burn: the bottle darkens to deep green with the splash burned through it Hard light: a high-contrast result with a bright bottle and the splash pushed back
Soft light Difference Exclusion Multiply
Soft light: the splash reads softly through the bottle and the label fades to pale green Difference: the bottle inverts to deep purple with a dark red droplet logo Exclusion: the bottle inverts to a softer mauve and most of the label washes out Multiply: the green splash shows through the whole bottle, darkening it
Hue Saturation Color Luminosity
Hue: the bottle turns pale mint and the logo outlines shift to pink Saturation: the bottle drops to grey while the background stays green Color: a grey bottle keeping its green droplet logo against the green background Luminosity: the bottle picks up a pale green tint from the background

The above examples show blend modes in action on a graphic. You can also apply them to a frame with text.

A text frame reading "chill water the purest" with Color burn chosen in the Blend mode dropdown

Normal

The default blend mode which draws the new graphics over the existing graphics.

Screen

Lightens the colors in the bottom layer by blending them with the inverse of the colors in the top layer.

Overlay

Combines the multiply and screen blend modes. It darkens the bottom layer where the top layer is dark, and lightens it where the top layer is light.

Darken

Compares the colors in both layers and selects the darker color for the resulting blend.

Lighten

Compares the colors in both layers and selects the lighter color for the resulting blend.

Color Dodge

Lightens the bottom layer color depending on the color of the top layer. It produces a brighter and more vibrant effect.

Color Burn

Darkens the bottom layer color depending on the color of the top layer. It produces a darker and more contrasted effect.

Hard Light

Multiplies or screens the colors, depending on the top layer's color value. It produces an intense and dramatic effect.

Soft Light

Darkens or lightens the colors, depending on the top layer's color value. It produces a soft and subtle effect.

Difference

Subtracts the bottom layer's color from the top layer's color. It produces an inverted effect.

Exclusion

Subtracts the bottom layer's color from the top layer's color, but with less intensity than the difference blend mode. It produces a softer inverted effect.

Multiply

Multiplies the colors in the top and bottom layers. It produces a darker effect.

Hue

Uses the hue of the top layer with the saturation and luminance of the bottom layer. It produces a hue-based color effect.

Saturation

Uses the saturation of the top layer with the hue and luminance of the bottom layer. It produces a saturation-based color effect.

Color

Uses the hue and saturation of the top layer with the luminance of the bottom layer. It produces a color-based effect.

Luminosity

Uses the luminance of the top layer with the hue and saturation of the bottom layer. It produces a luminosity-based effect.