Design and Styling
Effects

Blend Mode

1min

Add an option: Design tab → Appearance section → click the "+" on the right of the Blend Mode parameter. By default, the blend mode will be set to Normal.

Document image


Using blend modes, you can create various effects:

Normal – The default setting. Colors do not blend. • Multiply – The colors of the elements are multiplied. The effect is like applying images onto a transparent film. • Screen – The colors of the elements are multiplied and then the result is inverted. The effect is like the glowing images on a projection screen. • Overlay – Multiplies or lightens the color of the element depending on the color of the layer below. If the lower color is darker, the result is like in Multiply effect; if the lower color is lighter, the result is like in Screen effect.

Darken – The color of the bottom element is replaced with the color of the top element in areas where the top element is darker. • Lighten – The color of the bottom element is replaced with the color of the top element in areas where the top element is lighter. • Color-dodge – The color of the bottom element is lightened to reflect the color of the top element. • Color-burn – The color of the bottom element is darkened to reflect the color of the top element. • Hard-light – Multiplies or lightens the color of the element depending on the color of the bottom element. If the bottom color is lighter, the result is like in Multiply effect; if the bottom color is darker, the result is like in Screen effect. The effect is like the glow of a strong spotlight in the background. • Soft-light – The mode is similar to Hard-light effect, but the result is softer. The effect is like the glow of a diffused spotlight in the background. • Difference – Subtracts the darker color from the lighter color.

Exclusion – Similar to Difference effect, but with less contrast. • Hue – Creates a color that has the hue of the top color, but the saturation and brightness of the bottom color. • Saturation – Creates a color that has the saturation of the top color, but the hue and brightness of the bottom color. • Color – Creates a color that has the hue and saturation of the top color, but the brightness of the bottom color. • Luminosity – Creates a color that has the brightness of the top color, but the hue and saturation of the bottom color. The result is the opposite of Color effect.

Here’s how the blend modes look in practice — different parameters are applied to an image within a block with a backdrop:

Document image

Document image




Updated 27 Feb 2025
Did this page help you?