Blending mode for individual letters within a word in CSS

Issue

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...

Solution

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

Answered By - Mostafa Hassan