David Aji Frontend developer.

Creative text styling with the CSS mix-blend-mode property

4 min read 1193

Text Styling CSS Mix Blend Mode

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.

How 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 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. You would notice the resulting color of the content is usually very “loud.”

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.


More great articles from LogRocket:


saturation

mix-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.

color

mix-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.

luminosity

mix-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.

Demo

See the Pen
Mix blend mode
by David (@Ajiva)
on CodePen.

Some other use cases for mix-blend-mode

Cut-out effect

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.

See the Pen
cut out design
by David (@Ajiva)
on CodePen.

Spotlight effect

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.

Using mix-blend-mode with filter

Combining 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.

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 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.

Conclusion

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.

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 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 — .

David Aji Frontend developer.

Leave a Reply