How to blend elements in CSS ?
Blend modes are used to determine how two layers (color and/or image) are blend into each other. In this article, we will see how to blend an element using CSS.
Approach: In CSS, there are two properties that allow us to blend color and/or image together:
1. Using mix-blend-mode Property: The mix-blend-mode property is used to blend between the element and the element(s) that are behind it.
Syntax:
mix-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;
Example: The following example demonstrates the blend of HTML div element with one background image which is mentioned in the CSS part.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.divName1 {
background-image: url(
text-align: center;
background-size: 1400px 360px;
}
.divName1 h3 {
margin: 0;
font-size: 4.8rem;
text-transform: uppercase;
line-height: 1.9;
color: green;
mix-blend-mode: multiply;
}
</ style >
</ head >
< body >
< center >
< div class = "divName1" >
< h3 >Geeks for Geeks</ h3 >
</ div >
</ center >
</ body >
</ html >
|
Output:
Output Of The Code
2. Using background-blend-mode Property: The background-blend-mode property is used to blend the background image and its background color elements.
Syntax:
background-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
#divName1 {
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image:
background-blend-mode: multiply;
}
</ style >
</ head >
< body >
< center >
< h2 > background-blend-mode</ h2 >
< div id = "divName1" ></ div >
</ center >
</ body >
</ html >
|
Output:
Output Of The Code
Last Updated :
24 Jun, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...