shadow text effect

index.html

<h1>shadow<br>text<br>effect</h1>

shadow-text-effect.markdown

shadow text effect

A Pen by Mark Boots on CodePen.

License.

style.css

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

html, body { height: 100%; margin: 0; padding: 0 }
body {
  background-image: linear-gradient(45deg, hsl(0 0% 75%), hsl(0 0% 90%));
  display: grid;
  place-items: center;
}
h1 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 20vmin;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.075ch;
  color: hsl(0 0% 90%);
  text-align: center;
  --light-pos-x: 1; /* left: -1, center: 0, right: 1 */
  --light-pos-y: -1; /* top: -1, center: 0, bottom: 1 */
  
  --rim-size: .02ch;
  --shadow-offset: .2ch;
  --shadow-blur: .1ch;
  text-shadow: 
    calc(max(var(--rim-size), 1px) * var(--light-pos-x)) calc(max(var(--rim-size), 1px) * var(--light-pos-y)) hsl(0 0% 100%),
    calc(max(var(--rim-size), 1px) * var(--light-pos-x) * -1) calc(max(var(--rim-size), 1px) * var(--light-pos-y) * -1) hsl(0 0% 60%),
    calc(var(--shadow-offset) * var(--light-pos-x) * -1) calc(var(--shadow-offset) * var(--light-pos-y) * -1) var(--shadow-blur) hsl(0 0% 50% / .75) 
}