Blend Modes

Learn how to create compositional effects by mixing two or more layers.

css for designers design dev collaboration dev driven centric design

In CSS, the background-blend-mode property is used to specify how an element’s background images and background color blend together.

It enables designers to create visually appealing effects by combining multiple backgrounds with various blending modes, such as multiply, screen, overlay, and more.

Introduction

Blend modes are frequently used graphical effect in design software like Photoshop to combine colors from two or more layers to create a compositional effect.

There are 2 CSS properties that allow above-described effects — mix-blend-mode and background-blend-mode.

What is the difference between them? The background-blend-mode blends the background of an element, whereas the mix-blend-mode blends the entire element.

Let’s see all of them:

.blend-modes {
  mix-blend-mode: normal; /* blends the entire element */
  background-blend-mode: normal; /* blends only the elements background */
}

Normal

Value set to normal, is the default, meaning none of the elements/images would blend together.

Let’s see the syntax:

.normal {
  background-blend-mode: normal;
}

Multiply

Value set to multiply, increases the background images’ color contrast, creating a darker blend.

Let’s see the syntax:

.multiply {
  background-blend-mode: multiply;
}

Screen

Value set to screen, produces a lighter blend by computing the inverse of each color in the background images.

Let’s see the syntax:

.screen {
  background-blend-mode: screen;
}

Overlay

Value set to overlay, combines the multiply and screen blending modes to produce a blend of light and dark..\

Let’s see the syntax:

.overlay {
  background-blend-mode: overlay;
}

Darken

Value set to darken, chooses the shade that is the darkest in the background images, producing a darker blend.

Let’s see the syntax:

.darken {
  background-blend-mode: darken;
}

Lighten

Value set to lighten, creates a lighter blend by choosing the color that is the lightest in the background images.

Let’s see the syntax:

.lighten {
  background-blend-mode: lighten;
}

Color dodge

Value set to color-dodge, lightens the blend by brightening the background images while reducing contrast..

Let’s see the syntax:

.color-dodge {
  background-blend-mode: color-dodge;
}

Color burn

Value set to color-burn, Increases contrast to make the background images darker, creating a darker blend.

Let’s see the syntax:

.color-burn {
  background-blend-mode: color-burn;
}

Hard light

Value set to hard-light, combines the multiply and screen blending modes to produce a blend of dark and light with a higher contrast.

Let’s see the syntax:

.hard-light {
  background-blend-mode: hard-light;
}

Soft light

Value set to soft-light, creates an effect where background images are given a gentle lighting effect, creating a seamless blend.

Let’s see the syntax:

.soft-light {
  background-blend-mode: soft-light;
}

Difference

Value set to difference, produces a blend with a high contrast by calculating the absolute difference in color between the background images.

Let’s see the syntax:

.difference {
  background-blend-mode: difference;
}

Exclusion

Value set to exclusion, is a less-contrasty variation on the difference blending mode.

Let’s see the syntax:

.exclusion {
  background-blend-mode: exclusion;
}

Hue

Value set to hue, uses the content’s hue along with the background’s saturation and luminosity to create a color.

Let’s see the syntax:

.hue{
  background-blend-mode: hue;
}

Saturation

Value set to saturation, produces a color by blending the hue and luminosity of the background with the content’s saturation.

Let’s see the syntax:

.saturation {
  background-blend-mode: saturation;
}

Color

Value set to color, uses the content’s hue, saturation, and background brightness to create a color.

Let’s see the syntax:

.color {
  background-blend-mode: color;
}

Luminosity

Value set to luminosity, creates a color by combining the content’s brightness with the background’s hue and saturation. It’s the opposite of the color attribute.

Let’s see the syntax:

.luminosity {
  background-blend-mode: luminosity;
}
No one is always right

I use feedback to improve UI Crux Platform. If you noticed a mistake, please report it.