Blend Modes
Learn how to create compositional effects by mixing two or more layers.
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 */
}
.blend-modes {
mix-blend-mode: normal; /* blends the entire element */
background-blend-mode: normal; /* blends only the elements background */
}
.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;
}
.normal {
background-blend-mode: normal;
}
.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;
}
.multiply {
background-blend-mode: multiply;
}
.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;
}
.screen {
background-blend-mode: screen;
}
.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;
}
.overlay {
background-blend-mode: overlay;
}
.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;
}
.darken {
background-blend-mode: darken;
}
.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;
}
.lighten {
background-blend-mode: lighten;
}
.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-dodge {
background-blend-mode: color-dodge;
}
.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;
}
.color-burn {
background-blend-mode: color-burn;
}
.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;
}
.hard-light {
background-blend-mode: hard-light;
}
.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;
}
.soft-light {
background-blend-mode: soft-light;
}
.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;
}
.difference {
background-blend-mode: difference;
}
.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;
}
.exclusion {
background-blend-mode: exclusion;
}
.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;
}
.hue{
background-blend-mode: hue;
}
.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;
}
.saturation {
background-blend-mode: saturation;
}
.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;
}
.color {
background-blend-mode: color;
}
.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;
}
.luminosity {
background-blend-mode: luminosity;
}
.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.
