Try it Yourself: SVG Linear Gradient

SVG Linear Gradient

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <linearGradient id='basicFade'>
      <stop offset='0%' stop-color='#ff7e5f'/>
      <stop offset='100%' stop-color='#feb47b'/>
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='160' height='80' fill='url(#basicFade)'/>
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <linearGradient id='basicFade'>
      <stop offset='0%' stop-color='#ff7e5f'/>
      <stop offset='100%' stop-color='#feb47b'/>
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='160' height='80' fill='url(#basicFade)'/>
</svg>

</body>
</html>