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.
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
Let’s take a look at the core style set:
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.
Each CSS class has three primary parts – the background color, the image filter, and the top color layer created using ::after
.
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.
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.
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.
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); }
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.
filter()
property
If you’ve come up with some cool combinations not shown in our demo, share your code or links in the comments!
Torach Edwin
Awesome, Excited to try it out.
Thank you
Vijay Kumar Singh
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 ??
Vail Joy
Hello!
Check out the CSS course on https://www.codecademy.com/courses/css-coding-with-style/0/1 for a quick way to learn the CSs syntax. From there, just read the MDN guides for the mix-blend-mode property to understand how it works, and then this tutprial should feel very easy to you :) If youa re looking for more help in learning blend modes in general, check out this Photoshop tutorial to help you understand how each mode works with your color choices:
http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
Tom
You can make wonderful things by using CSS. Great tutorial.
craig steel
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?
Vail Joy
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
craig steel
Thanks Vail, looking forward to it. :)
Kabolobari Benakole
Nice to know this can be done. Then know when it can (and should) be done on a project. Thanks.
craig steel
Thanks Vail, looking forward to it. :)
Nermel
How to prevent the Caption inside image without affecting the color? for now, The caption text is blended with image.
Vail Joy
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.
Andrea Gardonio
Stumbled upon your blog. Quite well done and detailed. Great resource for web design.
Anonymous
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.
Anonymous
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.
Chad
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.