Blending mode for individual letters within a word in CSS

Question

I wonder if it is possible to apply a blending mode to individual letters to see how they overlap with negative letter spacing. As I understand it sees whole text string as one object and doesn't apply blending for glyphs within it. Maybe there is a clever way to do this effect without dividing text to individual one letter strings?

Thanks

Tried applying 'mix-blend-mode: multiply' and 'background-blend-mode: multiply' to the class but individual letters still don't overlap...

Answer 1

Actually you need some help from JS to achieve your goal exactly. Please check this

const element = document.getElementsByClassName("blend");
let text = element[0].getAttribute("data");
let blendMode = element[0].getAttribute("blend-mode");
for(let chr of text) 
  element[0].innerHTML += "<span style='mix-blend-mode: "+blendMode+"' >"+chr+"</span>";

.blend-style {
  letter-spacing: -35px;
  font-size:180px;
  font-weight:bold;
  color:rgba(22, 160, 133, 1);
  font-family:arial
}

<p class="blend blend-style" blend-mode="difference" data="BlendMe!"></p>

The goal here in the JS, is to split the word and set style property for blending mode on each letter separately. please don't forget to check as answered

Answer 2

You can approximate this by using an rgba color for the font

.blended-text {
  color: rgba(0, 50, 0, 70%);
  font: 21em sans-serif;
  letter-spacing: -70px;
}

<span class="blended-text">Blend</span>