Words by George 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.
Fundamentally there are two different blend mode types in CSS – they are
mix-blend-mode. The difference is that
background-blend-mode blends an element with its own
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. 🎨
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.
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
hard-light values on line 2 and check out the results!
Using the 'difference' blend value shows varied results depending on the construction of the card.
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!