| mix-blend-mode is a CSS property that defines how the content of an element should blend with the content of the element’s parent and its background. |
mix-blend-mode gives CSS developers greater flexibility to create native designs using real text on images, thereby removing the need to use often bloated images edited with tools like Photoshop.
One big advantage that gives us is better performance, as fewer images would be needed and file sizes would be significantly smaller. On top of that, using photoshopped images doesn’t provide the same SEO benefits that real text provides you.
Yet another important benefit of using mix-blend-mode as opposed to edited image alternatives is that you can use CSS animations, affording you the chance to add more life to your website and elements. Other practical use cases for mix-blend-mode include removing white background from logos and making dynamic text contrast whatever background it is on.
How mix-blend-mode works?
mix-blend-mode creates what is known as stacking context. Stacking context is an imaginary z-axis relative to the user facing the viewport where the HTML elements reside. They occupy this space based on elements’ priorities.
Syntax
The syntax for mix-blend-mode is:
mix-blend-mode: <blend-mode>
Where <blend-mode> can be any of the following values:
normal
mix-blend-mode:normal
This is the default value on the property and does not add any blend mode.
multiply
mix-blend-mode:multiply
This multiplies the element’s color with that of the background. This resulting color is mostly darker, depending on the background.
screen
mix-blend-mode:screen
screen makes the content much brighter than its background. It multiplies the content color with its background and complements the result.
overlay
mix-blend-mode:overlay
What overlay does is multiply if the background is darker than the content and screen if the background is lighter than the element’s content. This is similar to hard-light with the background and content color conditions inverted.
darken
mix-blend-mode:darken
This darkens the area of the background that is dark and leaves other parts unchanged.
lighten
mix-blend-mode:lighten
The content gets lighter around the parts of the background that have a light color. It’s opposed to darken.
color-dodge
mix-blend-mode:color-dodge
This brightens the background color to reflect the color of the element’s content. The result is derived from dividing the background color by the inverse of the content’s color.
color-burn
mix-blend-mode:color-burn
This is the opposite of color-dodge. This value darkens the color of the background to reflect the element’s content color. The result is gotten from inverting the background-color, dividing it by the content’s color, and inverting that result. If the content’s color is the inverse of the background color, then the result is black.
hard-light
mix-blend-mode:hard-light
hard-light will multiply if the content color is darker than the background, and screen if the content color is lighter. This is similar to overlay, but the background and foreground are swapped.
soft-light
mix-blend-mode:soft-light
Almost the opposite of hard-light. This will apply lighten or darken depending on the color of the content. It gives a softer look than what hard-light results in.
difference
mix-blend-mode:difference
difference picks the darker of the colors between the content and background and subtracts it from the other (lighter) color. If either of the colors between both content and background is white, then the result is an inverse of the other color.
exclusion
mix-blend-mode:exclusion
This is similar to difference, but with much lower contrast. As with difference, if either of the colors between both content and background is white, then the result is an inverse of the other color.
hue
mix-blend-mode:hue
Hue combines the hue of the content and the saturation and luminosity of the background to create a color for the content.