Add Cool Effects with CSS Blend Mode

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.

See the Pen
CSS Blen Modes by Tyler Duprey

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.

See the Pen
Themed, CSS blended background blur gallery by Paul Noble

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.

See the Pen
Filter + Blend Modes Demo by Chris Johnson

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!

See the Pen
CSS blend modes by Alvaro Felipe

Progressive Navigation

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.

See the Pen
Progress Navigation using CSS Blend Modes by Michael Leonard

Double Trouble

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.

See the Pen
double exposure using css blend modes by Pixelsonoro

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.

See the Pen
SVG Blended Outline & Text by Natasha Gonzales

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.

See the Pen
CSS Blend Mode Background by Gemma Stiles

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.

The post Add Cool Effects with CSS Blend Mode appeared first on Speckyboy Design Magazine.