How to give the linear-gradient in svg as a background color for a div?

Question

I have an svg like

<svg>
    <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)">
      <stop  offset="0" style="stop-color:#0071BC"/>
      <stop  offset="3.780070e-02" style="stop-color:#0071BC"/>
      <stop  offset="0.6151" style="stop-color:#00538B"/>
      <stop  offset="0.784" style="stop-color:#004C86"/>
      <stop  offset="0.9966" style="stop-color:#003B7C"/>
      <stop  offset="1" style="stop-color:#003B7C"/>
    </linearGradient>
</svg>

I'm not sure how can I give this linear gradient as a background for a button. I tried the following, but I don't know how to give gradient transform in css.

.btn {
  background: linear-gradient(to right, #0071BC 0%, #0071BC 37.80070%, #00538B 061.51%, #004C86 078.4%, #003B7C 099.66%, #003B7C 100%);
  color: white;
  border-radius: 8px;
  /* border: 1px solid #00538B; */
  width: 95%;
  height: 25px;
  padding: 0px;
}

<button class="btn">button</button>

Can somebody help? It is expected to look like this

But i'm getting something like:

Answer 1

This is a close gradient in css.

.btn {
  background: linear-gradient(to right, #0071bd 0%,#0171bb 39%,#016db5 41%,#005691 58%,#005691 59%,#01538b 61%,#014c86 78%,#003c7b 100%);
  
  border-radius: 5px;
  color: #fff;
  border: none;
}

<button class="btn">Closed</button>

In generally, I'm using the gradient editor by colorzila to generate gradients from image / css / manually. May there are another tools.

You can use the SVG itself, BUT:

1. You have to make sure that the gradient's coordinates are right and feet to the element (aka .btn) which in this case, not.
2. You need to convert it to base64.

In the below snippet, for quick fixing, I created a script that read the svg in the html and convert it to base64 so you can tuning your gradient with it.

Also, I changed a little the SVG syntax, Take a look:

const svg = document.querySelector('svg').outerHTML;
const base64 = window.btoa(svg);

document.querySelector('.btn').style.backgroundImage = `url(data:image/svg+xml;base64,${base64})`;

.btn {
  background: top repeat-x;
  background-size: cover;
  
  border-radius: 5px;
  color: #fff;
  border: none;
}

<button class="btn">Closed</button>

<svg width="1000px" height="30000px" xmlns="http://www.w3.org/2000/svg" style="display: none">
    <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)">
      <stop  offset="0" style="stop-color:#0071BC"/>
      <stop  offset="3.780070e-02" style="stop-color:#0071BC"/>
      <stop  offset="0.6151" style="stop-color:#00538B"/>
      <stop  offset="0.784" style="stop-color:#004C86"/>
      <stop  offset="0.9966" style="stop-color:#003B7C"/>
      <stop  offset="1" style="stop-color:#003B7C"/>
    </linearGradient>
    <g>
  <rect fill="url(#SVGID_124_)" stroke-width="0" x="0" y="0" width="100%" height="100%" />
 </g>
</svg>