CSS Blending

Blending allows us to merge an element with its background in different ways. There are 16 blend modes available in CSS:

normal
This is the default mode which specifies no blending. The blending formula simply selects the source color.
multiply
The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
screen
Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
overlay
Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
darken
Selects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
lighten
Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
color-dodge
Brightens the backdrop color to reflect the source color. Painting with black produces no changes.
color-burn
Darkens the backdrop color to reflect the source color. Painting with white produces no change.
hard-light
Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
soft-light
Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
difference
Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.
exclusion
Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change.
hue
Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
saturation
Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
color
Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.
luminosity
Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. This mode is the one you can use to create monchrome "tinted" image effects like the ones you can see in different website headers.

 

There are two blending properties. These two properties are:

All 16 blend modes can be applied to either blending property.

mix-blend-mode

Mix-blend-mode is used to blend an element with any elements that are behind it. The content behind the element can be any other elements.

Common blends are:

The example below shows the blending of an image with a colour (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend Image on Colour Example</title>

<style>
#container
{
    width:600px;
    height:600px;
    background-color: blue;
}

img 
{
    width: 100%;
    height:100%;
    mix-blend-mode: lighten;
}
</style>
</head>

<body>
<div id='container'>    
<img src="person.jpg"/>
</div>
</body>
</html>

Write code to place an image on a red background with a 'darken' blend, as shown here.

The example below shows the blending of an image with another image (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend image on image Example</title>

<style>
img 
{
    width: 600px;
    height:600px;
    position: absolute;
}

.blend 
{
    mix-blend-mode: darken;
}
</style>
</head>

<body>
<img src ="city.jpg">
<img class = "blend" src="person.jpg"/>
</body>
</html>

Write code to place a person's face behind a rain-soaked window, as shown here.

Write code to allow a user to select between various images and various blend modes, as shown here.

The example below shows the blending of an image with text (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend Image on text example</title>

<style>
p
{
    margin-top:200px;
    font-size:300px;
    color:green;
}

img 
{
    width: 600px;;
    height:600px;
    position: absolute;
    top: 0px;
    left:0px;
}

.blend
{
   mix-blend-mode: overlay;
}
</style>
</head>

<body> 
<p>DkIT</p>

<img class = "blend" src="person.jpg" />
</body>
</html>

Write code to get an image on text blend to cause the image to be grayscale, as shown here.

Write code to get an image on text blend to cause the image and the text to be a negative, as shown here.

The example below shows the blending of text with an image (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend letters onto an image Example</title>
<style>
img 
{
    width: 600px;;
    height:600px;
    position: absolute;
    top: 0px;
}

p
{
    position:absolute;
    margin:0px;
    top:300px;
    left:0px;
    font-size:270px;
    color:red;
}

.blend 
{
    mix-blend-mode: color-dodge;
}
</style>
</head>

<body>
<img  src="person.jpg"/>          
<p class='blend'>DkIT</p>
</body>
</html>

The example below shows the blending of text with text (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend words onto words Example</title>
<style>     
p
{
  font-size:200px;
  mix-blend-mode: difference;
	letter-spacing:-20px;
	margin-top:0px;
	margin-bottom:-150px;
}

p:nth-child(1)
{
	color:red;
}

p:nth-child(2)
{
	color:green;
}
</style>
</head>

<body>
<p>DkIT</p>
<p>DkIT</p>
</body>
</html>

Write code to blend different coloured words together, as shown here.

Write code to blend the multi-coloured letters of a word together, as shown here. Hint: As each letter is a different colour, you will need to hold the individual letters in a list.

The example below shows a div being used as a blend (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend div example</title>
<style>
img,
#horizontal_stripe
p
{
	margin:0px;
	padding:0px;
}

img,
#horizontal_stripe
{
	width:800px;
}

img
{
	height:600px;	
}

#horizontal_stripe
{
	width:800px;
	height:200px;
	position:absolute;
	top:200px;
  background-color: pink;
	mix-blend-mode:hue;
}
</style>
</head>
    
<body>
<img src="mountain.jpg"> 
<div id="horizontal_stripe"></div>
</body>
</html>

Extend the code above to blend a cross onto an image, as shown here.

Write code to place three blended circles and some non-blended text over an image, as shown here.

background-blend-mode

The background-blend-mode property specifies a blend mode for an element and its background-image or background-color.


 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>