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