gradient for text

use both with modernizr

by Alexander Zonov

HTML

<div class="mix-bland-mode"><h1>Текст с градиентом (mix-blend-mode)</h1></div>

<div class="background-clip"><h1>Текст с градиентом (background-clip)</h1></div>




<div class="svg"><h1>
  <svg> 
    <defs>
      <linearGradient id="gradientDefinition"
         x1="0" y1="0" x2="50%" y2="100%" 
         gradientUnits="userSpaceOnUse">
         <stop offset="0%"   style="stop-color:blue"/>
         <stop offset="50%" style="stop-color:green"/>
         <stop offset="100%" style="stop-color:red"/>
      </linearGradient> 
    </defs>
    
    <g transform="translate(0, 37)">
      <text id="horizontalText" x="0" y="0" 
            fill="url(#gradientDefinition)">
            Более длинный текст с градиентом (svg)
      </text>
    </g>
</svg>
</h1>
</div>

CSS

div.mix-bland-mode {
  background: linear-gradient( 75deg, blue, green, red );
  display: inline-block;
  margin: 0; padding: 0;
}

div.mix-bland-mode h1 {
  color: #000;
  background-color: white;
  mix-blend-mode: lighten;
  margin: 0;
}

div.background-clip h1 {
  margin: 0;
  display: inline-block;
  background: linear-gradient( 75deg, blue, green, red );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

div.svg h1 {
  margin: 0;
}

div.svg svg {
  width: 100%;
  height: 100%;