1. Mix-Blend-Mode

    CSS Gradient

    body{
    background:#04161f;
    font-family:”Lato”, sans-serif;
    margin:3em auto;
    max-width:50em;
    }
    .grad1{
    display:inline-block;
    font-size: 96px;
    margin:0;
    opacity:0.9;
    background:#fff;
    color:black;
    position:relative;
    text-shadow:1px 1px 0px #04161f, 1px 1px 0px #04161f, -1px -1px 0px #04161f;
    }
    .grad1:before, .grad1:after{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    pointer-events:none;
    }
    .grad1:before{
    background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #350670);
    content:””;
    display:block;
    mix-blend-mode:screen;
    }
    .grad1:after{
    content:”CSS Gradient”;
    background:#04161f;
    color:#fff;
    mix-blend-mode:multiply;
    }
    `

  2. -webkit-background-clip + -webkit-text-fill-mode

    CSS Gradient
    `
.grad2{
  font-size:72px;
  background:-webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #350670);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}