CSSblendColour

Trick to blend two colours in CSS using overlays and opacity.

by Keith Henry

HTML

<span val="text">text</span>

CSS

span {
    position: relative;
    color: rgba(0,0,0,0);
}

span::before {
    content: attr(val);
    color: blue;
    position: absolute;
        top: 0;
    left: 0;
}

span::after {
    content: attr(val);
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
}