<div class="wrapper">
  <h1 contenteditable spellcheck=false>boop.</h1>
</div>
.wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-family: mallory, futura, arial black, sans-serif;
  font-size: 30vw;
  font-weight: 800;
  letter-spacing: -0.1em;
  line-height: 1.4;
  padding: 0 0.25em;
  text-shadow:
     0.1vw 0.1vw #4F4F4F55,
     0.1vw -0.1vw #4F4F4F55,
     -0.1vw 0.1vw #4F4F4F55,
    -0.1vw -0.1vw #4F4F4F55;
}

@supports ((-webkit-background-clip: text) and (-webkit-text-stroke: 5vw)) {
  h1 {
    background: linear-gradient(160deg, #D459AB 0%, #FFDF37 50%, #A6FFFA 90%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 5vw transparent;
  }
}

External CSS

  1. https://use.typekit.net/fnr1orp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.