Are there ways to use additive color mixing in web development?

Question

I have a web design that works with additive color mixing. The desired effect is: red square overlays green square, the overlapping area appears yellow.

Are there any good ways to achieve additive color mixing with standard tools (CSS, CSS transparency/opacity, transparent png images)?

The way we want to apply it in the design: two patterns (e.g. transparent png images) overlay each other - the areas where the two patterns overlay are brighter.

Answer 1

METHOD 1:

The desired effect can be achieved using CSS mix-blend-mode nowadays. Chrome support only for now.

Visit chrome://flags/ and "Enable experimental Web Platform features" to see effect.

http://jsfiddle.net/9AgDm/4/

<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px;"></div>
<div style="width: 200px; height: 200px; background-color: #0F0; position: absolute; top: 0; left: 0;"></div>
<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px; mix-blend-mode: screen;"></div>

METHOD 2:

The effect can also be achieved using background-blend-mode with multiple background gradients on a single HTML element.

Check here for browser support: http://caniuse.com/css-backgroundblendmode

http://jsfiddle.net/9AgDm/5/

<div></div>

CSS:

div {
    background-blend-mode: screen;
    background: 
        linear-gradient(to right, #0F0, #0F0),
        linear-gradient(to right, #F00, #F00);
    background-position:
        0 0,
        100px 100px;
    background-repeat: no-repeat;
    background-size:
        200px 200px,
        200px 200px;
    height: 300px;
    width: 300px;
}

METHOD 3:

Same effect using SVG. Works on most browsers.

Tested on: FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5, 6+ (failed on 5.1)

http://jsfiddle.net/9AgDm/9/

<svg width="300" height="300">
  <defs>
    <filter id="additive">
      <feFlood x="0" y="0" width="200" height="200" flood-color="#0F0" result="a"/>
      <feFlood x="100" y="100" width="200" height="200" flood-color="#F00" result="b"/>
      <feBlend in="a" in2="b" result="ab" mode="screen"/>
     </filter>
  </defs>
  <rect filter="url(#additive)" width="100%" height="100%"/>
</svg>

METHOD 4:

With the exception if IE8 and below, canvas will work on most browsers. Here are a few examples/libraries that could achieve the additive colors:

http://media.chikuyonok.ru/canvas-blending/

http://www.pixastic.com/lib/docs/actions/blend/

http://canvasquery.com/#blending

Answer 2

As I saw the answer of TheNoble-Coder, I remembered the old ways of my first experiments with transparency. You can achieve an optical illusion similar to what you want with colored GIFs, PNGs or even any other raster graphics format.

The trick is to paint only every second pixel in the base color, so that a raster appears with colored and transparent pixels alternating. If you place two such images with different base colors above each other, the additive color mixing will result in the eye of the viewer and the final color looks like an additive color mix.

Back to your question: you can create such simple graphics effects using a canvas or a probably also through combination of CSS gradients.