<hgroup>  
  <h1>CSS Gradient Text</h1>
</hgroup>  
body {background-color: #FFF}
hgroup {
  background-color: #FFF;
  padding: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h1 {
  font-family: Impact, Charcoal, sans-serif;
  font-size: 85px;
  &::after {
    content: '';
    background: linear-gradient(to right, #9CF4EE, #EBEC7D);
    width: 101%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -0.5%;
    pointer-events: none;
    mix-blend-mode: screen;
  }
}

View Compiled

External CSS

  1. https://codepen.io/udyux/pen/jWMbjG.postcss

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js