Blend mode in CSS

I have been working recently on a web app that included Photoshop-like layer editing. One of the basic features of layers is that the selected layer has a bounding box.

That bounding box needs to be visible over all backgrounds. In my case, the background was a <canvas> displaying a lot of different images.

Initially, I went for a plain boring black-and-white dashed rectangle, which is fairly easy to get with two <rect>s in an inline SVG, but I didn’t like it. If only it was possible to use different blend modes to do something cooler…

And it is!

mix-blend-mode

You can set a blend mode for any arbitrary HTML element. The CSS property is called mix-blend-mode.

Its possible values are:

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

Support

Browser support at the moment is rather limited. There are no problems in Chrome and Firefox, Safari does not implement a few blend modes, and IE/Edge does not implement them at all.

Demo - a simple text

This is a simple black text with the blend mode overlay over a yellow-orange gradient.

See the Pen NjwXRx by Angelika Tyborska (@angelikatyborska) on CodePen.

Demo - Rainbow

A rainbow gradient over an iframe. Change the blend mode in the select box in the right top corner. Change the iframe’s source in the URL (please note some websites will not load in an iframe).

Source code available here.

My Bounding Box

I am sure Photoshop’s algorithm for choosing the color of the bounding box over any given pixel is probably very complicated, to be sure that the bounding box is always visible. My bounding box did not need to be perfect. I created two identical rectangles, one above the other:

  1. a rectangle with a white border with the blend mode difference
  2. a rectangle with a white border with the blend mode color.

That combination would only be invisible on big areas of plain colors similar to #808080 which is very unlikely for my use case.

The final effect ended up looking something like this:

My bounding box
A Photoshop-like bounding box made up of two inline SVGs over a canvas displaying a photo of my unamused cat

A demo of a simplified version (without the small squares in the corners):

See the Pen RVjxBb by Angelika Tyborska (@angelikatyborska) on CodePen.