<svg viewBox="0 0 300 100" width="100%" height="100px">
<defs>
<linearGradient id="spread" spreadMethod="pad" 
                x1="50%" x2="70%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="hsl(220,40%,50%)" />
    <stop offset="33%" stop-color="hsl(220,40%,80%)" />
    <stop offset="66%" stop-color="hsl(250,40%,40%)" />
    <stop offset="100%" stop-color="hsl(220,40%,60%)" />
</linearGradient>
</defs>
<rect width="300" height="100" x="0" y="0" fill="url(#spread)" />
</svg>