Web design, and particularly CSS, has taken on a predictable pattern in recent years. First, we create special effects that make heavy use of images, outside libraries or both. Then CSS comes along and adds these capabilities – greatly reducing the need for outside resources. That means much of the behind-the-scenes horsepower we need is simply built into the browser.
CSS blend mode is one such revelation. It allows elements to display colors from both the foreground and background layers. This works in much the same way that Photoshop blend modes do – making for some interesting effects.
While browser support is not 100% as of this writing (thanks for nothing, or almost nothing, Microsoft), designers are already exploring what can be achieved with blend modes. Here’s a look at some of the more exciting examples we found.
See the Difference a Blend Can Make
Let’s start off with this handy demo, which shows what each blend mode does to a background image. Use the drop-down menu and see how various modes affect the display. The amount of variation might surprise you.
Themed Background
Here’s a very practical usage of CSS blend modes. Select a photo within this gallery, and it shows more than just the full-sized image. You’ll also find a blended and blurred version of the image in the background, making for a more immersive experience.
Filter & Blend
The amount of potential image manipulation possible with CSS is kind of amazing. This tool offers visual proof, letting you adjust the base/mid/highlight effects and the colors used. The end result can be something that looks far and away different from the original.
Small Code, Big Results
This carefully-blended photo offers a solid example of what can be accomplished with just CSS. What makes it all the more impressive is that the style sheet is a mere five lines in length. It’s a matter of setting up a photo background, adding a gradient and finishing off with a blend. You can’t even create this effect in an image editor this quickly!
Stand out by Blending
CSS blend modes offer a nice change of pace for all sorts of design elements. While we may closely associate them with images, the examples above show some other effective uses as well. Items such as text and even navigation can benefit.
Even better is that they take a technique we’ve long seen in print design and have made it something we can easily implement on the web – no image editor required.
Take some time to experiment with CSS blend modes and see how they can enhance your next project.