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( "https://media.w3wiki.net/wp-content/uploads/20210622101607/image1.png"); 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 >Beginner for Beginner</ h3 > </ div > </ center > </ body > </ html > |
Output:
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: url("https://media.w3wiki.net/wp-content/uploads/20210622101952/circle.png"), url("https://media.w3wiki.net/wp-content/uploads/20210622102302/dog1.png"); background-blend-mode: multiply; } </ style > </ head > < body > < center > < h2 > background-blend-mode</ h2 > < div id = "divName1" ></ div > </ center > </ body > </ html > |
Output: