SVG gradient using CSS

Question

I\'m trying to get a gradient applied to an SVG rect element.

Currently, I\'m using the fill attribute. In my CSS file:

rec         


        

Answer 1

2019 Answer

With brand new css properties you can have even more flexibility with variables aka custom properties

.shape {
  width:500px;
  height:200px;
}

.shape .gradient-bg {
  fill: url(#header-shape-gradient) #fff;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

Just set a named variable for each stop in gradient and then customize as you like in css. You can even change their values dynamically with javascript, like:

document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");