Atomic Smash homepage splash

Blend modes in practical use

Words byGeorge HieronMarch 15, 2019

Blend modes are versatile and powerful CSS rules that can give striking results to make the front-end of your sites really stand out. Here at Atomic Smash, Ben likes to incorporate these kind of effects in his designs, and I will use this post to go through some examples of blend mode usage in a practical context.

What blend modes are there?

Fundamentally there are two different blend mode types in CSS – they are background-blend-mode and mix-blend-mode. The difference is that background-blend-mode blends an element with its own background-color and background-image, whereas mix-blend-mode will blend an element with the element that precedes it in the HTML. They share a range of 16 available blending options to choose from; normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

I’ve put together a Codepen to demonstrate some typical uses of this effect that are based on implementations I’ve used across a few different sites. I’m using mix-blend-mode with the multiply value. It’s a really cool and eye-catching effect, and I find it to be the most consistent in its application, making it very adaptable. I’ve saved the blend mode as a variable in the pen, so you can easily change it to one of the others to try them out and see which ones you like. ?

See the Pen
Blend modes in practical use
by AtomicSmash (@AtomicSmash)
on CodePen.

Hero ?

First in the pen is the hero image with a static blend applied. Looking at the markup, I’ve used a div with a background image, with another div following it, providing the colour. They are contained by another div, which is regulating the height and width. This setup is also useful if, for example, you wanted to create a slider element with several blended images, as each main container could be a slide on its own.

We can see that the element with the mix-blend-mode applied is .hero__blend-colour – this is because it comes after the image in the markup, so it is the element blending with the preceding element, i.e. the image. The order of these two elements doesn’t matter – if we were to reverse them so that the image followed the colour element, the blend will still work, as long as mix-blend-mode was applied to the latter of the two elements. The value, however, does have a different effect depending on whether the colour layer is above or below the image. multiply is very consistent and appears the same, however hard-light, for example, has a very different effect. I have made a separate pen to experiment with this here:

The other critical ingredient to the strength of this effect is applying a greyscale filter to the image. This is not essential – the blend mode will work without it – however, you will get some of the colour bleeding through the blend. You can comment out lines 40-42 of the first pen to see the difference, although it is not always obvious, depending on the image and the strength of the colour you are blending. This is also the reason why I’m using mix-blend-mode – if I were to use background-blend-mode on just the image, the greyscale filter would override the colour blend, as all the rules would be applied to the same element.

Cards ?

Moving on to the cards, I have set up several variations here to illustrate the subtle potential differences in constructing the blend modes with a contained image vs. background image method, and also how these variants handle being transitioned (hover to see the effect).

One important thing to note here is that the cards have a background-color value of pure white – this ensures that the card image appears natural and unchanged before the hover state (at least with multiply) and prevents any crossover with the body background colour, if it is anything other than white.

Again we can see that the multiply value gives a very consistent end result across all these methods, and transitions very smoothly to boot. Once we start changing the value, the differences in each method of construction become more apparent. Try using the difference and hard-light values on line 2 and check out the results!

See the Pen
Psychedelic blend modes
by AtomicSmash (@AtomicSmash)
on CodePen.

Image of the 'difference' blend value on some example cards.

Using the 'difference' blend value shows varied results depending on the construction of the card.

Caveats ⚠️

There are a few things to be aware of when using this effect. When setting the blend-mode value to difference, for example, it produces a slightly different effect between the background and contained image variants in Chrome. It also, at least in the present example, doesn’t transition particularly well in Safari, nor in Chrome on the background image variants. Transitions, in particular, seem to have a detrimental effect on the majority of these values, at least in combination with the greyscale filter. Personally, I quite like the effect without transition, as it feels snappy and impactful to me, but if you prefer or require a transition then this will likely limit your options or require some fiddling to get it just right.

It’s also important to note that, at the time of writing, these effects are not supported at all in Edge or Internet Explorer of any version ?. For those browsers I would recommend implementing a fallback using opacity; although it is nowhere near as impressive, it’s better than nothing!

There are many more cool things that can be done with these properties, and you can do some further reading about them here:

I hope you found this practical demo useful to give some context to how you might realistically apply blend modes in your future builds. Feel free to leave comments and suggestions, and if you’ve created a real-world use of one of the more bonkers blend modes like difference, I’d love to see it!

Go back to top

Keep up to date with Atomic news