How to Use CSS3 Blending Mode [CSS3 Tips]

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

If we have ever used a striking or print editor like Photoshop and Pixelmator, we should already be informed with Blending Modes. Blending Modes is a collection of modes that enables an intent to mix with other objects, and so producing contrastive outlay of a mix. If finished correctly, Blending Modes could outlay a really interesting result, like this.

Blend Mode focus in a trademark by Ivan Bobrov

Blending Mode has been a underline found usually in striking and print editors. Nowadays, we can find it in a CSS realm. Let’s take a demeanour how it works.

Recommended Reading: Understanding LESS Color Functions

Getting Started

It’s value observant that CSS3 Blend Mode is an initial feature. Firefox and Chrome are a usually browser that ships with this underline during a time of a writing.

Note: In Chrome, before it’s means to describe CSS3 Blend Mode, we will have to capacitate a Web Platform Features from a chrome://flags page.

Background and Mix Blend Mode

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

The mix-blend-mode defines how a calm of an component blends with other calm underneath. While a background-blend-mode property, as a name implies, addresses a credentials color, credentials image, and a credentials gradients.

Like in Photoshop, we are means to request a a 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, tone and luminosity.

Blend Mode options in Photoshop Layer panel.

Using CSS3 Blend Mode

The Google trademark is colorful, and has been made in many forms for a Google Doodle project. In this post, we will lift out a Blend outcome on a Google logotype to illustrate how this new CSS3 underline works.

First, let’s set a markup: we hang any minute with a camber component so we will means to mention opposite colors as good as character manners for a letter.

h1
spanG/spanspano/spanspano/spanspang/spanspanl/spanspane/span
/h1

Then, we supplement a colors for a Google brand, subsequent from BrandColors. Herein, we name a component by regulating a nth-child selector, vouchsafing us request a styles but carrying to supplement additional HTML classes to any of a camber component jacket a letters.

.demo-wrapper .title 
	letter-spacing: -25px;

span:first-child 
	color: 
	position: relative;
	z-index: 100;

span:nth-child(2) 
	color: 

span:nth-child(3) 
	color: 

span:nth-child(4) 
	color: 
	position: relative;
	z-index: 100;

span:nth-child(5) 
	color: 	

span:nth-child(6) 
	color: 

At this stage, here is how a trademark turns out. The trademark now looks some-more densed as we diminution a whitespace between a minute during -25px by combined code.

Now we request a Blend mode.

The strange colors of a trademark as good as a colors of a intersected letters turns out some-more vivid.

We have practical a trademark with both Opacity and CSS3 Blend Mode. The output, as expected, is distinctive; a colors of a Google trademark with a opacity practical looks seared and faded. See a demo of their comparison in movement below.

• View Demo


• Download Source

Further resources

• CSS Compositing and Blending Level 1 Documentation — W3C


• New CSS slope possibilities with a background-blend-mode property

How to Use CSS3 Blending Mode [CSS3 Tips]