CSS Data Type - <blend-mode>
CSS <blend-mode> data type specifies the color scheme that should be used when elements overlap. This data type is used by both the background-blend-mode and mix-blend-mode properties.
Possible Values
normal − Default value. The top color completely covers the bottom color.
multiply − The top and bottom colour values are multiplied to obtain the final color.
screen − The final color is obtained by inverting, multiplying, and then inverting that value again.
overlay − The final color is determined by multiplying if the bottom color is darker or screening if it is lighter. Similiar to "hard-light", but with swapped layers.
darken − The final color is the darkest values of each color channel.
lighten − The final color is the lightest values of each color channel.
color-dodge − Divide the bottom color by the inverse of the top color to get the final color.
color-burn − Inverting the bottom color, dividing it by the top color, and then inverting that value to get the final color.
hard-light − The final colour is determined by multiplying if the top color is darker or same as of "screen", if it is lighter. Similar to "overlay", but with swapped layers.
soft-light − The final color is softer than hard-light. Similart to hard-light.
difference − The final color is the difference between the lighter and darker shades. Black doesn't affect the result, but white swaps the colors.
exclusion − Similar to the "difference", with less contrast. A black layer has no effect, while white reverses the other color.
hue − The final color uses the hue of the top color as well as the bottom color's saturation and luminosity.
saturation − The final color combines the top color's saturation with the bottom color's hue and luminosity.
color − The final color combines the top color's hue and saturation with the bottom color's luminosity.
luminosity − It is similar to the value of "color", but with swapped layers.
Syntax
mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity;
CSS - background-blend-mode: normal
The following example demonstrates that background-blend-mode: normal property makes the top color the final color. The red box completely covers the blue box −
Here is an example −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; background-blend-mode: normal; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - background-blend-mode: multiply
When you set mix-blend-mode: multiply, the red box and the blue box mix together, creating a black shade where the two boxes overlap −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: multiply; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: screen
The following example demonstrates that the red box with mix-blend-mode: screen, gets overlapped with the blue box, creating a new color that's a mix of both the colors red and blue −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: screen; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: overlay
The following example demonstrates the use of mix-blend-mode: overlay property, that makes the blue box completely hiding the red box −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: overlay; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: darken
The following example demonstrates that mix-blend-mode: darken property combines the red and blue boxes, making a darker shade of color where they overlap −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: darken; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: lighten
The following example demonstrates that mix-blend-mode: lighten property combines the red and blue boxes, creating a light shade of color where they overlap −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: lighten; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: color-dodge
The following example demonstrates that the mix-blend-mode: color-dodge property results in the overlapping region of the red box and the blue box to appear brighter. −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: blue; } .front-box { width: 150px; height: 150px; background-color: red; position: absolute; top: 60px; left: 60px; mix-blend-mode: color-dodge; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: color-burn
The following example demonstrates that the mix-blend-mode: color-burn property results in a darkened effect. The place where the boxes overlap it becomes darker than each of the original colors −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: orange; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: color-burn; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: hard-light
The following example demonstrates that the mix-blend-mode: hard-light property, which is applied on the blue color box, completely hiding the red box −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: red; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: hard-light; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: soft-light
The following example demonstrates that the mix-blend-mode: soft-light property, which is applied on blue color box, resulting in red box completely hiding the blue box −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: red; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: soft-light; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: difference
The following example demonstrates that the mix-blend-mode: difference property results in subtraction of the darker color from the lighter color and creation of a unique color −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: red; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: difference; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: exclusion
The following example demonstrates that the mix-blend-mode: exclusion property applied to blue box. When the blue and red boxes overlap they create a unique color −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: red; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: exclusion; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: hue
The following example demonstrates that the mix-blend-mode: hue property applied to blue box. When the blue and orange boxes overlap then it produces the color based on their hue values −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: orange; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: hue; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: saturation
The following example demonstrates that the red box with mix-blend-mode: saturation creates a new color saturation based on the top layer −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: orange; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: saturation; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: color
The following example demonstrates that the red box with mix-blend-mode: color creates a new color based on the hue and saturation on the top layer −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: orange; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: color; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
CSS - mix-blend-mode: luminosity
The following example demonstrates that the mix-blend-mode: luminosity property applied to blue box. When the blue and orange boxes overlap, they produces a dark color −
<html> <head> <style> .box { width: 300px; height: 200px; position: relative; } .background-box { width: 150px; height: 150px; background-color: orange; } .front-box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 60px; left: 60px; mix-blend-mode: luminosity; } </style> </head> <body> <div class="box"> <div class="background-box"></div> <div class="front-box"></div> </div> </body> </html>
To Continue Learning Please Login
Login with Google