CSS Blend Modes could be the next big thing in Web Design

Coming to a browser near you.

Bennett Feely
Dec 22, 2013 · 4 min read

For everyone who has ever opened Photoshop or Illustrator you are most likely familiar with blend modes. Multiply, screen, overlay, and soft light, to name a few can turn boring opaque layers into beautiful pieces of stained glass. However, what awesome “blend modes” do web designers have at their disposal for making websites beautiful? Opacity. Yep, that’s it.

Image for post
Image for post
Cool-looking things that are difficult or downright impossible to replicate in CSS right now. Top row: Doublenaut, Graham Hicks, Jonathan Quintin, and Geoff Teehan. Bottom row: Ben Johnson, Claire Morales, Alan Defibaugh, and Jess Barlow.

It’s a shame that we couldn’t have had more blend modes to work with when the opacity property gained widespread support across browsers, but it turns out that ensuring Photoshop-like blend modes render uniformly across different browsers and implementations is no easy task. Some blend modes have been available in SVG through filters, but these are limited and don’t see much use in the real world.

Despite this, things are changing fast and there is a candidate recommendation titled CSS Compositing and Blending. Blend modes in CSS have been promoted heavily by Adobe Web Platform team (along with other interesting features like CSS filters and masking).

Right now, the specification brings three brand new properties to CSS, background-blend-mode, mix-blend-mode, and isolation. Let’s explore!

Image for post
Image for post
Particles by Justin Windle. Blend modes make this awesome demo really pop.

First, here’s a little secret, blend modes are now available for use with HTML5 Canvas in all the latest browsers except Internet Explorer. They are even supported on iOS Safari and mobile versions of Chrome. However, why should we stop there? Blend modes would be incredibly useful in CSS.

Image for post
Image for post
Sixteen blend modes are coming to CSS. Demo.

The new background-blend-mode property allows you to specify blending between background layers of an element. Whether it be between an element’s background-color and background-image, or a background-image CSS gradient, background-blend-mode mixes all the backgrounds together with the blend mode(s) you specify. CSS gradients can be blended together to produce many fast-loading backgrounds for websites or elements.

Image for post
Image for post
Medium even uses blend modes in their articles. Too bad our friend CSS isn’t there to make this process a lot faster and easier.

Don’t think this property would get much use? Don’t go further than the website you’re on right now. When uploading full-page backgrounds to an article, Medium gives you the option to apply a color to the background to make the title stand out a bit more. However, because browsers don’t have blend modes in CSS, Medium has to do this the slow and costly way. They make six copies of the image you upload with different colors applied to each one, a process done on the server side. For the reader, this method is a lot slower than it could be with background-blend-mode. This new property could also be utilized elsewhere:

Image for post
Image for post
The Verge’s website is unique partly because of the pseudo blend modes they apply on their headlines. background-blend-mode could likely be used to make these kind of effects even better.

The background-blend-mode property can also be used to make new CSS gradients that were not possible before.

While background-blend-mode is strictly for blending backgrounds, we’d ideally also like to blend HTML and SVG elements like layers on a .psd. Fortunately, that is where the mix-blend-mode property comes in.

mix-blend-mode will blend elements with their backdrop. Perhaps you could experiment with a header that utilizes the screen blend mode rather than a simple background color with rgba(). There are also probably an infinite number of possibilities with loading animations and blend modes. The isolation property stops elements with mix-blend-mode from blending with the backdrop.

Implementation of the mix-blend-mode property is more complex than background-blend-mode so it is taking a bit more time, but don’t let that get you down. Blend modes will be here soon!

  • Chrome: Supports background-blend-mode and mix-blend-mode.
  • Firefox: Supports background-blend-mode and mix-blend-mode.
  • Safari: Supports background-blend-mode and mix-blend-mode on desktop and mobile. However, does not yet support hue, saturation, color, luminosity blend modes.
  • Opera: Supports background-blend-mode and mix-blend-mode.
  • Internet Explorer: background-blend-mode and mix-blend-mode are not supported and listed as “under consideration” with a “low” priority. Canvas blend modes are supported.

Demos of CSS Blend Modes on CodePen by me
Compositing and Blending Level 1 specification by the W3c
CSS Blend Mode browser support matrix by Horia Olaru
Understanding CSS Blend Modes by Dudley Storey
Blending coming to an SVG renderer near you! by Tavmjong Bah
Recreating Photoshop Blend Modes by Khoi Vinh
Bringing Blend Modes to the Web by Rik Cabanier (April 2012)
Basics of CSS Blending by Chris Coyier
Getting to Know CSS Blend Modes by Shwetank Dixit
CSS Gradient Possibilities with background-blend-mode by me

about://updates

The web platform is changing and improving more and more each day and I’ll try to keep this article somewhat updated. If you see things that need updating please let me know via a tweet (@bennettfeely) or email. Thanks!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store