CodePen

HTML

            
              <h2>With opacity (lame, but could be fallback):</h2>
<h1 class="opacity">hungry?</h1>

<h2>Nice blending way:</h2>
<h1 class="blending">hungry?</h1>

<h2>Which should look like:</h2>
<img class="screencap" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/hungry-example.png">
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Varela+Round);

html {
  font-family: 'Varela Round', sans-serif;
  text-align: center;
  padding: 2rem;
}

h1 {
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -1.25rem;
}
.opacity {
  span:nth-child(1) {
    color: rgba(#AB1795, 0.75);
  }
  span:nth-child(2) {
    color: rgba(#167CFB, 0.75);
  }
  span:nth-child(3) {
    color: rgba(#37D86E, 0.75);
  }
  span:nth-child(4) {
    color: rgba(#DA7C5F, 0.75);
  }
  span:nth-child(5) {
    color: rgba(#B020AD, 0.75);
  }
  span:nth-child(6) {
    color: rgba(#1685FB, 0.75);
  }
  span:nth-child(7) {
    color: rgba(#D4FEA1, 0.75);
  }
}

.blending {
  span {
    mix-blend-mode: multiply;
  }
  span:nth-child(1) {
    color: #AB1795;
  }
  span:nth-child(2) {
    color: #167CFB;
  }
  span:nth-child(3) {
    color: #37D86E;
  }
  span:nth-child(4) {
    color: #DA7C5F;
  }
  span:nth-child(5) {
    color: #B020AD;
  }
  span:nth-child(6) {
    color: #1685FB;
  }
  span:nth-child(7) {
    color: #D4FEA1;
  }
}

h2:not(:first-child) {
  margin-top: 50px; 
}
.screencap {
  width: 320px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("h1").lettering();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................