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 nutshellmix-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.
The syntax for mix-blend-mode is:
mix-blend-mode: <blend-mode>
Where <blend-mode> can be any of the following values:
normalmix-blend-mode:normal
This is the default value on the property and does not add any blend mode.
multiplymix-blend-mode:multiply
This multiplies the element’s color with that of the background. This resulting color is mostly darker, depending on the background.
screenmix-blend-mode:screen
screen makes the content much brighter than its background. It multiplies the content color with its background and complements the result.
overlaymix-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.
darkenmix-blend-mode:darken
This darkens the area of the background that is dark and leaves other parts unchanged.
lightenmix-blend-mode:lighten
The content gets lighter around the parts of the background that have a light color. It’s opposed to darken.
Learn more →color-dodgemix-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. You would notice the resulting color of the content is usually very “loud.”
color-burnmix-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-lightmix-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-lightmix-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.
differencemix-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.
exclusionmix-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.
huemix-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.
saturationmix-blend-mode:saturation
saturation, on the other hand, combines the saturation of the content and the hue and luminosity of the background to create a color for the content.
colormix-blend-mode:color
color creates a color for the content by combining the hue and saturation of the content with the luminosity of the background.
luminositymix-blend-mode:hue
luminosity inverts the color attribute. It combines the luminosity of the content with the hue and saturation of the background to create a color for the content.
See the Pen
Mix blend mode by David (@Ajiva)
on CodePen.
mix-blend-modeIn 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.
See the Pen
cut out design by David (@Ajiva)
on CodePen.
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.
See the Pen
Torch Light with mix-blend-mode by David (@Ajiva)
on CodePen.
mix-blend-mode with filterCombining 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 mix-blend-mode.
See the Pen
mix-blend-mode with filters by David (@Ajiva)
on CodePen.
Here’s another similar one I use on my website:
See the Pen
Negative effect mix-blend-mode by David (@Ajiva)
on CodePen.
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 mix-blend-mode.
See the Pen
Remove white background from logo with mix-blend-mode by David (@Ajiva)
on CodePen.
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 background-blend-mode.
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.
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.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 and mobile apps — start monitoring for free.
Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.
MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.
After internationalization, you can further localize your apps to make user experiences more friendly. Learn how to do this in TypeScript.
You can leverage containers to streamline the process of setting up a dev environment. Let’s see how using VS Code and Docker.
