.png)
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
.png)
