CSS Mix Blend Mode


CSS Mix Blend Mode, Mix Blend Mode Black and White




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 


CSS Mix Blend Mode, Mix Blend Mode Black and White

Post a Comment

Previous Post Next Post