How to create overlapping multiplied color divs?

Question

I think everybody knows that image of color theory from somewhere.

Is it possible to create something like that with CSS only? Substractively mixed colors? Or any other approach avoiding big image files? Simply adding an opacity attribute won't work since it also softens the original background color.

Please feel free to edit my prepared fiddle: https://jsfiddle.net/leymannx/d4gghwhk/

<div id="parent">
    <div class="wrapper">
        <div id="child-1" class="circle">
            <div class="text">Cyan</div>
        </div>
        <div id="child-2" class="circle">
            <div class="text">Magenta</div>
        </div>
        <div id="child-3" class="circle">
            <div class="text">Yellow</div>
        </div>
    </div>
</div>

Answer 1

This page describes a CSS way of doing this which is supported by...

Chrome: Supports background-blend-mode in Chrome 35.
- mix-blend-mode on the way and can be enabled in chrome://flags under “Experimental Web Platform Features”.

Firefox: Implements background-blend-mode in Firefox 30 release on June 10, 2014. Firefox will be the first browser to ship mix-blend-mode version 31.

Safari: Will support background-blend-mode and mix-blend-mode in Safari 8 coming this fall.

Opera: Supports background-blend-mode in Opera 22. mix-blend-mode can be enabled in opera://flags under “Experimental Web Platform Features”.

Internet Explorer: Canvas blend modes and mix-blend-mode is listed as “Under Consideration”.

They list a LOT of examples, some of which include Javascript, but the picture in your OP can be done with pure CSS.

This gives the following result (if your browser is set up as above):

* {
    color: black;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 20px;
    text-shadow: 2px 2px 2px white;
}

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    mix-blend-mode: multiply;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: normal;
}
#child-1 {
    background: cyan;
    position: absolute;
    top: 100px;
    left: 100px;
}
#child-2 {
    background: magenta;
    position: absolute;
    top: 100px;
}
#child-3 {
    background: yellow;
    position: absolute;
    top: 0;
    left: 50px;
}

<div id="parent">
    <div class="wrapper">
        <div id="child-1" class="circle">
            <div class="text">Cyan</div>
        </div>
        <div id="child-2" class="circle">
            <div class="text">Magenta</div>
        </div>
        <div id="child-3" class="circle">
            <div class="text">Yellow</div>
        </div>
    </div>
</div>