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.

See the Pen Spotify Colorizer Effects Using CSS Blend Modes by Vail (@vailjoy) on CodePen.0

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.

If you’ve come up with some cool combinations not shown in our demo, share your code or links in the comments!

15 Comments

  1. Torach Edwin
    Jan 11, 2017 @ 1:24 am

    Awesome, Excited to try it out.
    Thank you

    Reply

  2. Vijay Kumar Singh
    Jan 13, 2017 @ 8:10 am

    Hey, I love your work. But as i have just started. I wan’t some thorough explanation to gallop it all. Can you please direct me where should i start some beginner level tutorials. So that i can do this easily ??

    Reply

  3. Tom
    Jan 17, 2017 @ 4:17 am

    You can make wonderful things by using CSS. Great tutorial.

    Reply

  4. craig steel
    Jan 17, 2017 @ 3:11 pm

    Great tutorial. I was wondering is there a way for using technique and have the colours fade from one colour to another just using CSS?

    Reply

    • Vail Joy
      Jan 19, 2017 @ 6:54 am

      Hi Craig!

      Today we are publishing a tutorial on CSS transition which will show you how to do that – the trick is to set the color change on the hover event (or whatever) the way I removed them in the example. If you want them to automatically change color or continually color shift, then you have to use animate and @keyframes which will be covered next week :D

      Reply

      • craig steel
        Jan 20, 2017 @ 11:02 am

        Thanks Vail, looking forward to it. :)

        Reply

  5. Kabolobari Benakole
    Jan 18, 2017 @ 11:02 am

    Nice to know this can be done. Then know when it can (and should) be done on a project. Thanks.

    Reply

    • craig steel
      Jan 20, 2017 @ 11:01 am

      Thanks Vail, looking forward to it. :)

      Reply

  6. Nermel
    Jan 24, 2017 @ 3:58 am

    How to prevent the Caption inside image without affecting the color? for now, The caption text is blended with image.

    Reply

    • Vail Joy
      Jan 26, 2017 @ 9:24 am

      Hello!

      My recommendation is to use figure to wrap the image and a pseudo element on the figure, then put the caption inside a figcaption wrapper.

      Reply

  7. Andrea Gardonio
    Feb 7, 2017 @ 2:16 am

    Stumbled upon your blog. Quite well done and detailed. Great resource for web design.

    Reply

  8. Anonymous
    Feb 13, 2017 @ 2:01 pm

    Bonjour :) et merci pour ce tuto
    J’arrive crer l’effet, mais rien ne se passe lorsque je dplace la souris sur l’image, pourtant j’ai rpter votre exemple, pouvez-vous m’aider svp?

    Merci
    Clia L.

    Reply

  9. Anonymous
    Feb 13, 2017 @ 2:03 pm

    Hello :) and thank you for this tutorial
    I can create the effect, but nothing happens when I move the mouse over the image, yet I repeat your example, can you help me please?

    Thank you
    Clia L.

    Reply

  10. Chad
    May 20, 2017 @ 1:01 am

    This is another great resource for us web designers. Thank you for sharing ;) Surely, I am going to incorporate this approach to my upcoming web design projects.

    Reply

Leave a Reply

7th Anniversary: 50% off all WordPress themes and plugins at Themify.