Loading Please Wait...
CSS background-blend-mode property is used to set the blending property of multiple background layers (images, colors).
The background-blend-mode property can have following values:
normal: sets blending mode to normal.
multiply: sets blending mode to multiply.
screen: sets blending mode to screen.
overlay: sets blending mode to overlay.
darken: sets blending mode to darken.
lighten: sets blending mode to lighten.
color-dodge: sets blending mode to color-dodge.
color-burn: sets blending mode to color-burn.
hard-light: sets blending mode to hard-light.
soft-light: sets blending mode to soft-light.
difference: sets blending mode to difference.
exclusion: sets blending mode to exclusion.
hue: sets blending mode to hue.
saturation: sets blending mode to saturation.
color: sets blending mode to color.
luminosity: sets blending mode to luminosity.
inherit: inherit from parent.
initial: initial as browser default.
revert: same as it would be if no changes were made.
revert-layer: same as back to the previous value.
unset: same as parent (like inherit) and if not inherited then back to browser default (like initial).
/* Keyword values */
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;
/* Multiple backgrounds */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved