CodePen

HTML

            
              PRO TIP: view this in chrome canary with 'experimental web platform features' enabled.
<h1>hungry?</h1>
            
          
!

CSS

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

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

h1 {
  margin-top: .25em;
  font-size: 7rem;
  letter-spacing: -1.25rem;
}
h1 span {
    mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
  color: rgba(#AB1795, 1);
}
h1 span:nth-child(2) {
  color: rgba(#167CFB, 1);
}
h1 span:nth-child(3) {
  color: rgba(#37D86E, 1);
}
h1 span:nth-child(4) {
  color: rgba(#DA7C5F, 1);
}
h1 span:nth-child(5) {
  color: rgba(#B020AD, 1);
}
h1 span:nth-child(6) {
  color: rgba(#1685FB, 1);
}
h1 span:nth-child(7) {
  color: rgba(#D4FEA1, 1);
}
            
          
!
? ?
? ?
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 ..................