How to Use CSS3 Blending Mode [CSS3 Tips]

Note: This feature here requires enabling from the chrome://flags page for it to work.

If you have ever used a graphic or photo editor like Photoshop and Pixelmator, you should already be familiar with Blending Modes. Blending Modes is a collection of modes that enables an object to blend with other objects, and thus producing contrastive output of the mix. If done correctly, Blending Modes could output a very enticing result, like this.

Blend Mode application in a logo by Ivan Bobrov

Blending Mode has been a feature found only in graphic and photo editors. Nowadays, you can find it in the CSS realm. Let’s take a look how it works.

Recommended Reading: Understanding LESS Color Functions

Getting Started

It’s worth noting that CSS3 Blend Mode is an experimental feature. Firefox and Chrome are the only browser that ships with this feature at the time of the writing.

Note: In Chrome, before it’s able to render CSS3 Blend Mode, you will have to enable the Web Platform Features from the chrome://flags page.

Background and Mix Blend Mode

There are two newly introduced CSS properties regarding Blending Mode: mix-blend-mode and background-blend-mode.

The mix-blend-mode defines how the content of an element blends with other content underneath. While the background-blend-mode property, as the name implies, addresses the background color, background image, and the background gradients.

Like in Photoshop, we are able to apply the the following Blending modes to those CSS properties: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Blend Mode options in Photoshop Layer panel.

Using CSS3 Blend Mode

The Google logo is colorful, and has been shaped in many forms for the Google Doodle project. In this post, we will carry out the Blend effect on the Google logotype to illustrate how this new CSS3 feature works.

First, let’s set the markup: we wrap each letter with a span element so we will able to specify different colors as well as style rules for the letter.

 <h1> <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span> </h1> 

Then, we add the colors for the Google brand, derived from BrandColors. Herein, we select the element by using the nth-child selector, letting us apply the styles without having to add additional HTML classes to each of the span element wrapping the letters.

 .demo-wrapper .title { letter-spacing: -25px; } span:first-child { color: #4285f4; position: relative; z-index: 100; } span:nth-child(2) { color: #db4437; } span:nth-child(3) { color: #f4b400; } span:nth-child(4) { color: #4285f4; position: relative; z-index: 100; } span:nth-child(5) { color: #0f9d58; } span:nth-child(6) { color: #db4437; } 

At this stage, here is how the logo turns out. The logo now looks more densed as we decrease the whitespace between the letter at -25px through added code.

Now we apply the Blend mode.

The original colors of the logo as well as the colors of the intersected letters turns out more vivid.

We have applied the logo with both Opacity and CSS3 Blend Mode. The output, as expected, is distinctive; the colors of the Google logo with the opacity applied looks stale and faded. See a demo of their comparison in action below.

• View Demo
• Download Source

Controlling CSS3 Animation with steps() Function

Animation is one of the greatest features introduced to CSS. In the past, web animation was only available in the JavaScript or Flash territory. But, today, many websites opt to use CSS for adding subtle animation. In previous articles, we have gone through how to do some cool things with CSS animation like adding a marquee effect and adding bounce effect to something.

In this article, we will once again dive into CSS animation. This time, we are going to discuss a CSS animation function, steps(), that enables us to control the animation’s movement — don’t freak out, it’s not as puzzling as it sounds. Let’s take a look.

Recommended Reading: 38 Inspiring CSS3 Animation Demos

So what is it?

Normally, the animation in CSS will go straight from start to end at the specified duration. steps() is part of the animation timing function. It allows us to control the animation to move gradually. The very best example that shows how the steps() works would be the second hand of an analog clock; the clocks second hand does not move continuously, instead its movements are split into stages. So let’s replicate it with CSS animation and steps().

Replicating the Second Hand of a Clock

Let’s first add the keyframes that will rotate the Second Hand for 360 degrees; the rotation will start at 90 degrees (or at 12 o’clock). Note that the following code may need a prefix (-moz-, -o-, and -ms-) in order to work across browsers.

 @-webkit-keyframes rotation { from { transform: rotate(90deg); } to { transform: rotate(450deg); } } 

The second hand will move steadily every second and complete a 360 degree rotation in 60 seconds. Thus, here we will set the animation duration for 60s and this tells the browser to complete it in 60 steps with steps(60) like so.

 .second { animation: rotation 60s steps(60) infinite; transform-origin: 100% 50%; //styles decoration background-color: #e45341; height: 2px; margin-top: -1px; position: absolute; top: 50%; width: 50%; } 

We have created two demos for this; one with steps() and one with linear. You can see the different moves from this screenshot below.

At this point, hopefully, you can figure out and imagine how steps() works. To see the demo in action, follow this link below.

• View Demo
• Download Source

More Inspiration…

In addition, here we have collected a few terrific experiments and demonstrations that exploit steps() from many web developers. Check them out and I hope you can derive some inspiration from them.

• Pure CSS3 typing animation with steps() by Lea Verou
• Cat Walk by Rachel Nabors
• Ken's Street Fighter II by David Walsh