Overlapping chars with shadow

index.html

<h1 class="overlap overlap-front">Hello World</h1>

<h1 class="overlap overlap-back">Hello World</h1>

overlapping-chars-with-shadow.markdown

overlapping chars with shadow

A Pen by Mark Boots on CodePen.

License.

script.js

const overlapEls = document.querySelectorAll(".overlap") || [];
overlapEls.forEach(el => {
  const chars = [...el.textContent];
  el.innerHTML = "";
  chars.forEach((char,index) => {
    const span = document.createElement("span");
    span.textContent = char;
    span.style.setProperty("--index", index)
    el.append(span)
  })
})
  

style.css

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

html { 
  color-scheme: dark;
}
h1 {
  text-align: center;
  font-size: 20vmin;
  font-family: 'Luckiest Guy', cursive;
  text-transform: uppercase;
}
.overlap{
  --overlap: .15ch;
  --shadow-offset: .1ch;
  --shadow-blur: .2ch;
  --shadow-color: black;
  letter-spacing: calc(var(--overlap) * -1); 
  isolation: isolate;
}
.overlap-front { --mult: 1; }
.overlap-back { --mult: -1; }

.overlap>span { 
  position: relative;
  z-index: calc(var(--index, 1) * var(--mult, 1));
}
.overlap-front>span:not(:first-of-type),
.overlap-back>span:not(:last-of-type){
  text-shadow: 
    calc(var(--mult, 1) * var(--shadow-offset,0) * -1) 0 
    var(--shadow-blur, 0) 
    var(--shadow-color, black);
}