<h1>
	<span class="color1">r</span>
	<span class="color2">a</span>
	<span class="color3">w</span>
	<span class="color4">r</span>
</h1>
/* GIF from Dave Gamez https://giphy.com/gifs/heart-teamo-team-o-26BRv0ThflsHCqDrG */

h1 {
  background: url('https://media.giphy.com/media/26BRv0ThflsHCqDrG/giphy.gif') no-repeat center center / cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 60, 40, .2);
  /*  general styling  */
	margin: 0;
  font-size: 20vmax;
  text-align: center;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
}

span {
  letter-spacing: 2vmax;
}

.color1 {
  -webkit-text-fill-color: hsla(220, 100%, 50%, .4);
}

.color2 {
  -webkit-text-fill-color: hsla(90, 100%, 70%, .4);
}

.color3 {
  -webkit-text-fill-color: hsla(170, 100%, 60%, .6);
}

.color4 {
  -webkit-text-fill-color: hsla(0, 60%, 50%, .6);
}

body {
  background-color: hsl(210, 50%, 15%);
  background-image: linear-gradient(135deg, #ffc0c0, #CFC0E4);
  display: flex;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.