CSS Mix Blend Mode
The mix blend mode is a property of CSS which define how an element blend with its background or any color like any filter or effect: Overlay, multiply, normal, screen, etc.
There are two types of property that allow us to blend any colors or image together in CSS.
1. MIX-BLEND-MODE
With This mix-blend-mode property, we define blending between two or more element.
2. BACKGROUND-BLEND-MODE
With this property, we define the blending between the element’s background image and its background-color.
Mix Blend Mode Black and White
There 16 blend mode values for both properties are following :
- Color:- Create a hue and saturation of the content with color value.
- Lighten:- Background replaced where content is lighter.
- Color-burn:- The darkness of the background changed with the natural color using color-burn.
- Luminosity:- This element inverse of color attributes.
- Color-dodge:- This attribute Increases the brightness of the background color.
- Multiply:- Background multiply with the background using these attributes.
- Difference:- Subtract darkest color - lightest color.
- Exclusion:- Same as Difference but with low contrast.
- Saturation:- Create color with the saturation of the content with combined hue and luminosity.
- Hard Light:- depend on the content of the background then the attributes decide value will be screen or Multiply.
- Soft Light:- depend on the content of the background then the attributes decide value will be darkened or lighten.
- Hue:- With the saturation or luminosity, Hue creates the color of the content.
- Screen:- Multiply the background and the content the screen give us result Which is brighter than the background color.
- Unset:- Using this removes the current blend mode from an element.
- Inherit:- The element will inherit the blend mode from the parent element.
- Initial:- Its is does not set the blend mode.
Example :
Youtube Tutorial on Mix Blend Mode
CSS MIX BLEND MODE TEXT
HTML FILE
/<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0"
name="viewport"></meta>
<title>Document</title>
<link href="main.css" rel="stylesheet"></link>
</head>
<body>
<div>
<h1 class="first">DREAM</h1>
<h1 class="second">DREAM</h1>
<h1 class="third">DREAM</h1>
</div>
</body>
</html>
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0"
name="viewport"></meta>
<title>Document</title>
<link href="main.css" rel="stylesheet"></link>
</head>
<body>
<div>
<h1 class="first">DREAM</h1>
<h1 class="second">DREAM</h1>
<h1 class="third">DREAM</h1>
</div>
</body>
</html>
CSS FILE
What is SVG ANIMATION in Html : Click Here
.first{
text-align: center;
color: navajowhite;
position: absolute;
top: -1px;
left: 8px;
}
.second{
position: absolute;
text-align: center;
top: 3px;
left: 7px;
color: palevioletred;
mix-blend-mode: darken;
}
.third{
position: absolute;
text-align: center;
top: 6px;
left: 3px;
color: darkturquoise;
mix-blend-mode: color-burn;
}
h1{
font-size: 300px;
font-family: verdana,serif;
margin: 0;
}
div{
position: relative;
}
text-align: center;
color: navajowhite;
position: absolute;
top: -1px;
left: 8px;
}
.second{
position: absolute;
text-align: center;
top: 3px;
left: 7px;
color: palevioletred;
mix-blend-mode: darken;
}
.third{
position: absolute;
text-align: center;
top: 6px;
left: 3px;
color: darkturquoise;
mix-blend-mode: color-burn;
}
h1{
font-size: 300px;
font-family: verdana,serif;
margin: 0;
}
div{
position: relative;
}
Output
0 Comments