htmlcssblendingcolor-blending

Blending mode for individual letters within a word in CSS


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?

ThanksThis is how I want it to look

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

    enter image description here