V

6 min read

How to Create Spotify Colorizer Effects With CSS Blend Modes

  • in css

When Spotify launched their colorful new brand identity, featuring hip duo-toned imagery, it went hand-in-hand with a new Colorizer tool that allows artists to apply a variety of filters to images. This solved a problem in which Spotify needed a way to present the thousands of images uploaded, all with a different look and feel, in a way that keeps them uniform with the brand. This is one of the most common problems facing web design, especially when the app or website content is outside the control of a full-time art director. This tutorial will show you how to use pure CSS to achieve a wide variety of Spotify colorizer effects that can be applied to any image.

Mix Blend Mode

The key to creating duo-tone effects in Photoshop is to colorize the whites and blacks of a grayscale image by sandwiching it between two color layers. The first layer establishes the foundation color, the photo layer is set to the Multiply blend mode, and the top layer set to the Lighten blend mode to colorize the blacks in the image or vice versa. This same basic technique can be applied using CSS thanks to the mix-blend-mode property.

The mix-blend-mode property can be used on just about any element, including pseudo-elements, to blend it with whatever is behind it. This should not be confused with its companion property, background-blend-mode, which is specifically for blending multiple images in a background-image declaration.

mix-blend-mode supports the following familiar Photoshop layer blend-mode values:

mix-blend-mode: multiply;  
mix-blend-mode: screen;  
mix-blend-mode: overlay;  
mix-blend-mode: darken;  
mix-blend-mode: lighten;  
mix-blend-mode: color-dodge;  
mix-blend-mode: color-burn;  
mix-blend-mode: hard-light;  
mix-blend-mode: soft-light;  
mix-blend-mode: difference; 
mix-blend-mode: exclusion;  
mix-blend-mode: hue;  
mix-blend-mode: saturation;  
mix-blend-mode: color;  
mix-blend-mode: luminosity;

The majority of the Spotify-style effects are achieved using a combination of multiply and lighten, but I’ve included a few variations so you can see how other combos can work together.

Full Screen Demo

Let’s take a look at the core style set:

Structure

For these styles to work, your images need to be wrapped by something, whether it be a div, span or figure.

<div class="column green"><img src="path/to/image"/></div>

This wrapper will serve as the first layer, with the top layer being added using a pseudo-element.

CSS

Each CSS class has three primary parts – the background color, the image filter, and the top color layer created using ::after.

1 – Background

For each style, a background color is set on the image wrapper:

.green{
   background-color: #00ff36;
}

Bright colors on images with large areas of white or black will give you the best results.

2 – Image

For duo-tones to look best, a high-contrast black and white image must be used. Since the problem we are solving has to do with unpredictable image types of all colors, you can use CSS filter to turn the image grayscale, then set a contrast level that works best.

We then set mix-blend-mode to multiply, just like we would in Photoshop.

.green img{
   filter: grayscale(100%) contrast(1);
   mix-blend-mode: multiply;
}

For situations where you don’t know what the images will look like, a contrast level of 1.2 is a good start. Going below 1 (such as .8) will fade the image more, and can cause the effect to be lost on photos that already have a faded filter or low contrast to begin with. A high level, such as 2, can cause too much detail to be lost but can give you an interesting “screen-printed” look.

3 – Color Overlay

The color overlay can be a span or a div, but it is much easier to simply create a pseudo-element using ::after on the image wrapper element.

First we need to establish the element and position it over the image. Our image wrapper has a class of column we’ll use to do this so our color effect classes can focus on just their effects.

.column::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease-in-out .5s;
}

Now we can add the background color and mix mode to this element each of our effect style sets:

.green::after{
  background-color: #23278a;
  mix-blend-mode: lighten;
}

In this particular style, the lighten mix mode applies the blue color to the dark areas of the image. You can also swap multiply and lighten around to get different results – the modes you select depend the most on the color combination you are using and the look you are after.

Going Beyond Multiply and Lighten

If multiply is making things too dark, try darken instead. Want a simple color overlay? Try overlay or color on the ::after element.

You can also use gradients on your overlay for a little extra dimension as shown in the demo. Like the other effects, there are countless ways to combine the mix modes. A dark colored background color works best with lighten on the image and and hard-light on the overlay where your gradient background is declared. For light background colors, you can stick with the basic darken/lighten or multiply/lighten combo.

Here is what our purple and green gradient style set looks like all together:

.purple{
   background-color: #88169d;
}
.purple img{
   -webkit-filter: grayscale(100%) contrast(1.2);
   filter: grayscale(100%) contrast(1.2);
   mix-blend-mode: lighten;
}
.purple::after{
   mix-blend-mode: hard-light;
   background: linear-gradient(to top left, #75d775, #321a5b);
}

Conclusion

Spotify’s successful campaign was created by the Collins design firm with the goal to reconnect us with the emotional impact of the music we listen to. The visual styling combines the retro feel of familiar filters with today’s strong attraction to minimal shapes and vibrant color. The result is simple, fresh and easily identifiable. Using CSS blend modes is a great way to unify the look of content across a website, and these Spotify Colorizer style effects offer a timeless pop of color for your bespoke designs, too.

CSS mix-blend-modes are supported in webkit browsers, but not in IE (yet). It is a candidate in CSS level 4 which expects wide adoption this year. If you would like to ensure these effects only load on browsers that can render them, you can use the @supports rule to wrap the effect styles.

This post originally appeared on WebDesignerWall

Coder.
Conjuror.
_X Designer.

Codepen Github Dribbble Wordpress