svg colors range

by jpeter06

HTML

<svg>
    <defs>
        <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="20%" stop-color="#0079BF" />
          <stop offset="60%" stop-color="#B400D2" />
          <stop offset="100%" stop-color="#e82c2c" />
        </linearGradient>
        <linearGradient id="MyGradient2">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="20%" stop-color="#B400D2" />
          <stop offset="100%" stop-color="#e82c2c" />
        </linearGradient>
      </defs>
    <path id="fillpath" d="M0 0 l 300 0 l 0 50 l -300 0 l 0 -50 z" />
    <path id="fillpath2" d="M0 55 l 300 0 l 0 50 l -300 0 l 0 -50 z" />
</svg>
<div id="div" class="grad">DIV</div>

CSS

#fillpath{    fill:url(#MyGradient2); }
#fillpath2{    fill: url(#MyGradient); }
 
.grad{    background: linear-gradient(to right, #ffffff 0%, #0079BF 20%, #B400D2 60%, #e82c2c 100%); }
#div{  margin-left:5px;  width:300px;  height:50px; padding:16px; box-sizing: border-box;}
svg{  margin-top:5px; margin-left:5px;  width:100%;  height:100px; }

body, html{  width:100%;  height:100%;
             padding:0px;  margin:0px;
              text-align:center;color:white;
             overflow:hidden; font-family:arial}