Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Understanding CSS Blend Modes

by Durodola Ridwan | Sunday, October 05, 2014 | 24 Comments

Most of us using image editing tools like Photoshop, illustrator, Sketch or GIMP, are already familiar with blend modes. Like the name suggest, blend modes provide a way to specify how one layer will interact or blend with another layer underneath. Until now, these software were the domain of photo editing, but now they are available on the web using CSS. In essence, these modes are mathematical functions, which use the mathematical representations of the colors of the source and background layers — for example RGBa, where values are between 0 and 1 for all the channels — and returns a final mathematical value for that particular pixel, which in the end, determines the color of that pixel. The exact formulas that each blend mode employs for determining colors can be read in the specification.



Right now, the specification supports three new properties, background-blend-mode, mix-blend-mode, and isolation.


Background blend mode

The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc).
Blending modes should be defined in the same order as the background-image CSS property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

You can blend background-images together, or blend them with background-color like this;

.bg-blend {
background-image: url(sample.jpg);
background-color: blue;
background-blend-mode: multiply;
}


You can also blend two background images, like so:

.bg-blend {
background-image: url(sample1.jpg), url(sample2.jpg);
background-blend-mode: multiply;
}


You can specify different effect for each image. It's as simple as:

.bg-blend {
background-image: url(sample1.jpg), url(sample2.jpg);
background-blend-mode: screen, normal;
}

In the above example, the image sample1.jpg will get the screen effect applied to it, while sample2.jpg will get no effect applied to it.

Here is another cutting-edge demo by Adobe Web Platform Team:

See the Pen CSS Element Background Blend Modes by Adobe Web Platform (@adobe) on CodePen.

background-blend-mode possible values include: multiple, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity and normal which indicates that no blending should happen.


Mix blend mode

Instead of blending only backgrounds, you might want to blend HTML and SVG elements like layers on a .psd, mix-blend-mode property is all you need.

The mix-blend-mode property specifies how an element mix colors with its backdrop. The backdrop could be any element underneath the source element. You could experiment with a header that utilizes the screen blend mode rather than a simple background color with rgba().

You can write something like:

h1 {
mix-blend-mode: overlay;
}

Here is a great demo by Chris Coyier:

See the Pen GxlBm by Chris Coyier (@chriscoyier) on CodePen.

If you apply mix-blend-mode to an element, the element content will blend with the content of the element that is below it and the element's background.


Isolation mode

Sometimes, you might not want to blend an element with is backdrop or element underneath, your choice might be to blend all element (let's says within a div container) together.

Setting isolation to isolate will turn the element into a stacking context, like:

div {
isolation: isolate;
}

In CSS, a background image or the content of an <img> must always be rendered into an isolated group. For instance, if you link to an SVG file through the <img> tag, the artwork of that SVG will not blend with the backdrop of the content.

Here's a demo page by Opera which make use of mix-blend-mode and isolation property.


SVG blend mode

In SVG, we can still use blend modes via feImage and feBlend, but it will make a whole lot of sense If we add it via CSS.

With the mix-blend-mode property, we can define how each element within the svg document interact with each other.

For example:

<svg>
  <circle cx="60" cy="50" r="50" fill="red"/>
  <circle cx="140" cy="50" r="50" fill="green"/>
  <circle cx="100" cy="100" r="50" fill="yellow"/></svg>

And the following style rule:

circle {
mix-blend-mode: multiply;
}

See the Pen SVG Blend Mode by Durodola Ridwan (@durodolaridwan) on CodePen.

The above code produces three overlapping circles, with each circle rendering from bottom to top. Where the elements overlap, the blend mode produces a change in color.


Canvas blend mode

To use blend modes in canvas, set the globalCompositeOperation property of the Context 2D Canvas, as follows:

var canvas = document . getElementById( 'canvas'
var ctx = canvas . getContext ( '2d' );
ctx .globalCompositeOperation = 'multiply' ;

After this block is executed, any graphic elements drawn on the canvas are blended using the multiply blend mode. You can also alter the opacity of the element with the globalAlpha property.

Below is a simple demo:

See the Pen Canvas Blend Mode by Durodola Ridwan (@durodolaridwan) on CodePen.

Here is another demo  by Adobe Web Platform which is archived by drawing a red rectangle on top of the whole canvas, using the overlay blend mode:

See the Pen giLzm by Adobe Web Platform (@adobe) on CodePen.



CSS gradients

With the background-blend-mode property, we can create super cool CSS gradients. CSS gradients are completely resolution-independent and faster to modify than images. With performance considerations in mind, animations and transitions are possible through the background-size or background-position properties.

Bennett Feely have put in a lot of work to create some amazing CSS gradients. You can view the whole gradients here:



Browser support

background-blend-mode CSS property is available Chrome 35+, Firefox (+mobile) 30+, Opera (+mobile) 22+, Safari 21+, iOS8+ and Android 4.4+. But not supported by IE.

mix-blend-mode CSS property is available in Firefox (+mobile) 32+, Safari (+mobile) 8+. In Chrome and Opera, it is behind an experimental features flag.

isolation CSS property is available in Safari. In Chrome and Opera, it is behind an experimental features flag, and not yet implemented in Firefox.

To enable support for CSS Blend Modes in Opera, type opera:flags in the address bar and enable the option: "Enable experimental Web Platform features" For Chrome, you need to enable the same option by going to chrome://flags.
While Firefox does not support isolation property, you can still enable other properties from the about:config section.


Feature detention

It's always a good idea to feature detect support for blend modes, likewise all other new CSS property. A tiny JavaScript that can handle this task is as follow:

var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
var supportsIsolation = window.getComputedStyle(document.body).isolation;

The above code will return true if it detects support for it, and false otherwise.

Another great way of detecting support is to use a tool like Modernizr. You can learn more about its usage here. Also you can detect support with CSS @supports by writing code like:

@supports((mix-blend-mode: screen) and
(background-blend-mode: screen)) {

}


Other resources




Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

24 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I already recommend it to my sister as she needs it in her study..
    Info site for Piano Lessons

    ReplyDelete
  2. It’s really such nice information to get advantage from. MacFarlane Gro

    ReplyDelete
  3. thanks for this i will add this to my website project


    Heard about iPhone Repair

    ReplyDelete
  4. Nice blog, Your work is great and i like you and hopping for some more nice posts. Continue writing such a nice blog. I am very happy and enjoyed a lot.
    custom essay writing service

    ReplyDelete
  5. Really nice blog with lots of vital information. Want to check your board exam results,PSEB results,CBSE 10th result,then must check Board Exam Result 2016

    ReplyDelete
  6. Want to watch the Euro Cup matches live from your home,just check out Euro Cup 2016 live stream

    ReplyDelete
  7. Have you heard about National Black Cat Day which is two days prior to National Cat Day.
    Check out my blog to get all the latest information about it and stay updated

    ReplyDelete
  8. Know more about best kid's special Unblocked Games for more fun.

    ReplyDelete
  9. iOS 10 is the tenth major release of the iOS operating system developed by Apple Inc., being the successor to iOS 9.iOS 10 improves and adds upon user experience system-wide including 3D Touch expansion, an updated lock screen, and "widget" support.
    To used Latest IOS version IOS 10 without any restriction you can download IOS 10 Jailbreak free from CydiaNerd.

    ReplyDelete
  10. Have a look about Cat Day 2016, to get further information you must visit my blog Cat Day 2016 and stay updated with all information.

    ReplyDelete
  11. Hey Dear,

    Really informative post and good knowledge sharing about css Pressure Reducing Valve

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger