<p>
  This is a <span>Gradient Underline</span>.
</p>

span {
  /* MAGIC */
  background-image: linear-gradient(transparent 64px, #F243B3 50%, #FFCA47 100%);
}

p{
  font-size: 64px;
}




/* End of demo. Utility code below. */




body {
  text-align: center;
  color: white;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/* 
  The magic here is that the font-size 
  matches the transparent offset of the
  linear gradient, pushing the color
  below the text.
*/