CSS mix-blend-mode not working? Set a background-color!

πŸ’‘ If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.

html, body {
    background-color: #fff;
}

~

Demos + Explanation

Without a background-color set

You’ll notice here that for the “white” sections, the set mix-blend-mode: difference does not seem to work. The navigation will stay white and visually blend into the white background. Note that the navigation is not actually gone, as you can still see it shine through whenever a number of any of the sections crosses it.

See the Pen CSS mix-blend-mode not working? (1/2) by Bramus (@bramus) on CodePen.

The reason why it doesn’t work is that the white sections don’t really have a white background. They have no background-color set, so they fall back to the default value of transparent. Visually this is manifested as a white color, but to the compositor it will still be transparent. As the compositor can’t calculate the difference of the white text against the transparent background, the text will remain white.

~

With a background-color set

With background-color: #fff; set on the body/html the compositor does know how to calc the difference, and the demo will behave correctly.


See the Pen CSS mix-blend-mode not working? (2/2) by Bramus (@bramus) on CodePen.

Alternatively we could set this declaration on the sections themselves:

section {
    background-color: #fff;
}

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

β˜•οΈ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Side-channel attacking browsers through CSS3 features

Ruslan Habalov and Dario Weißer found a way to read contents from an iframe, using CSS3:

Accessing the DOM of an iframe that includes a cross-origin resource is forbidden by default. However, the content of the iframe was displayed in the same context as the rest of the site so we wanted to verify if there is side-channel potential that might allow us to leak state information through the interaction of browser features with the iframed content. With this in mind, we went ahead and tested various CSS features like transparency, rotation and mix-blend-mode on top of the cross-origin iframe.

By doing so, we discovered a bug that allowed side-channel attacking the CSS feature mix-blend-mode.

The bug was disclosed properly and has already been fixed.

Side-channel attacking browsers through CSS3 features →

Another neat hack that recently made rounds was this one, using the W3C Ambient Light Sensor API. Always fun to see smart people find a way to abuse a new technology that seems safe at first πŸ™‚

Reverse clip path with blend modes

Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor.

The gif and the extra background-blend-mode: screen; also give it a nice touch πŸ™‚

Reverse clip path with blend modes →
Cutting out the inner part of an element using clip-path

Blending Modes 101

blending-modes

Now this sounds familiar:

When it comes to Blending Modes (in Sketch), my bulletproof method has always been: try one, if it didn’t work, try another one. So, I recently decided to learn more about those techniques and I’d love to share my findings with you.

Multiply, Screen, Lighten, and Overlay are covered.

Sketch: Blending Modes 101 →

Compositing And Blending In CSS

css-blend-modes

Before the Compositing and Blending specification was introduced, CSS allowed one type of composite operations: simple alpha compositing. This is what the opacity property is for. By changing an element’s opacity, the browser makes it translucent so that the colors of its backdrop can show through.

Today, two main properties exist that allow us to blend elements and backround images by specifying one of 16 available blend modes. These two properties are background-blend-mode and mix-blend-mode. Let’s get to know each.

Compositing And Blending In CSS →

Making the Web Sweeter with Food Network and Cupcakes

Adobe’s Web Platform group teamed up with Food Network to experiment with bringing their popular Cupcakes! tablet application to the web. See how we turned beautiful content from Food Network, hardware from Leap Motion, speech recognition, responsive tooling, and new layout and graphics standards into a next-generation web experience.

Canvas Blend Modes, CSS Masks, CSS Clip Paths, Dynamic Masks, Regions, CSS Shapes, Web Speech API, …

Making the Web Sweeter with Food Network and Cupcakes →

Photoshop Blend Modes coming to CSS

If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes.

Last year, I joined the W3C and started contributing to the SVG and FX task forces. I am now spending the bulk of my time on editing, discussing and implementing the CSS compositing and blending spec. The new draft will introduce a new CSS property: blend-mode

Supported values for blend-mode:

  • normal
  • plus
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

Bringing blending to the Web →
Compositing and Blending 1.0 Spec (Editor’s Draft) →

Photoshop-style blend modes for HTML Canvas Contexts

Adobe Photoshop has a variety of helpful blend modes for compositing images from multiple RGBA layers. This small library provides the same functionality for HTML Canvas Contexts, with the goal of producing the same results as Photoshop.

Allows you to do stuff like:

// Likely an 'offscreen' (not in the DOM) canvas
var over = someCanvas.getContext('2d'); 

// Usually a canvas that is shown on the page
var under = anotherCanvas.getContext('2d');

// Blend all of 'over' onto 'under', starting at the upper left corner
over.blendOnto(under,'screen');

// Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under'
over.blendOnto(under,'multiply',{destX:17,destY:42});

// Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under'
over.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16});

Supports blend modes normal, screen, multiply and difference. Other blend modes are not (fully) supported (see the readme)

Photoshop-style blend modes for HTML Canvas Contexts →