CSS Mix Blend Mode, Mix Blend Mode Black and White

Today Pubg

January 16, 2022

---

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>

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;
}

Output