Home > Software engineering >  Blending mode for individual letters within a word in CSS
Blending mode for individual letters within a word in CSS

Time:03-23

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

CodePudding user response:

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 >Blend</span>

CodePudding user response:

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

  • Related