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. With this, you can create nice blends and colors for parts of an element’s content depending on its direct 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.
mix-blend-mode works in a nutshell
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. This is the same idea that the
position CSS property uses, too.
mix-blend-mode applies to all elements, including SVGs, though this is not yet available on all browsers at the time of writing.
Syntax and values
The syntax for
<blend-mode> can be any of the following values:
This is the default value on the property and does not add any blend mode.
This multiplies the element’s color with that of the background. This resulting color is mostly darker, depending on the background.
screen makes the content much brighter than its background. It multiplies the content color with its background and complements the result.
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.
This darkens the area of the background that is dark and leaves other parts unchanged.
The content gets lighter around the parts of the background that have a light color. It’s opposed to
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. You would notice the resulting color of the content is usually very “loud.”
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.
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.
Almost the opposite of
hard-light. This will apply
darken depending on the color of the content. It gives a softer look than what
hard-light results in.
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.
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 combines the
hue of the content and the
luminosity of the background to create a color for the content.
saturation, on the other hand, combines the
saturation of the content and the
luminosity of the background to create a color for the content.
color creates a color for the content by combining the hue and saturation of the content with the luminosity of the background.
luminosity inverts the
color attribute. It combines the
luminosity of the content with the
saturation of the background to create a color for the content.
Some other use cases for
In this example, we’re able to create a cut-out effect for the text by giving the text a white background and using the
screen blend mode.
This next example portrays a spotlight effect. The text is hidden until the light reflects on it. This is achieved by using the
darken blend mode on the text, so it shows only when the div with the yellow color is on it.
mix-blend-mode with the
filter property helps you achieve really engaging and enthralling designs with CSS. You can use
filter on both the content and background to get whatever effect you want.
In the example below, we are able to achieve a bleached-looking design by applying an
invert filter to the background and content, then using
difference for the
Here’s another similar one I use on my website:
Removing white background from a logo
Let’s say you have a logo image that has a white background, and the background over which you place that image isn’t white. Of course, simple solution is to use a tool like Photoshop (or even free tools like remove.bg) to clip out the white background, but this can also be achieved using
multiply multiplies the background color with the content color, so the white part of the logo changes to the color of the background. I used
filter:contrast(1) to make the logo brighter since the
multiply value make the logo a bit darker.
Although this may not be an optimal solution for this problem, it may still come in handy in some scenarios.
The possibilities with
mix-blend-mode are, dare I say, endless. It opens up a whole new world of abilities to you as a frontend developer. You can keep experimenting and trying
mix-blend-mode with different properties, including
I hope this article was able to give you an introduction to using
mix-blend-mode and show you relevant examples you may want to use.
Is your frontend hogging your users' CPU?As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/
LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web apps — Start monitoring for free.