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.
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!
Blend modes can be used for more than just stunning image effects. Here, it’s used as a helpful microinteraction in a scroll-based navigation menu. Users can see the current chapter they’re reading based on the menu item’s color opacity. What’s more, the effect also indicates whether you’re at the beginning or end of a chapter. jQuery is a big help here as well, keeping track of scroll position.
The process of multiple exposure photography combines two images into one. The concept is used to great effect here, with a background photo being combined with an animated GIF to create something rather psychedelic. It also strengthens the urge to play some classic video games.
Totally Rad Text
Combine blend modes with SVG text and you can create some gorgeous effects. In this example, two layers of text are created. One has a fill color, the other an outline. They are then positioned offset from each other, leading to this compelling and functional look. It’s even responsive.
A Seamless Rainbow
We’ll close out our collection with an example of how a little creativity can go a long way. This stunning rainbow of colors may look very complicated. However, it is actually made up of three fairly basic CSS gradients combined with a blend mode. Sometimes, simple really is better.
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.
Want to see more? Find these and other examples within our CodePen Collection.
- Using Images to Enhance the CSS Hover Effect
- Code as an Ode to Hackers
- 12 Stunning Retro Neon Effects in Web Design
- Boom! Examining Explosions in Web Design
- Creating Liquid Effects on the Web
- Making a Statement: The Use of Stacked Text Blocks in Web Design
- Snippets That Celebrate Old School Tech