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   rect       cursor  pointer      shape-rendering  crispEdges      fill   a71a2e      And the rect element has the correct fill color when viewed in the browser   However  I d like to know if I can apply a linear gradient to this element

User · Answer

Here is a solution where you can add a gradient and change its colours using only CSS:

_x000D_

// JS is not required for the solution. It's used only for the interactive demo._x000D_
const svg = document.querySelector('svg');_x000D_
document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));_x000D_
document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));

_x000D_

svg.green stop:nth-child(1) {_x000D_
  stop-color: #60c50b;_x000D_
}_x000D_
svg.green stop:nth-child(2) {_x000D_
  stop-color: #139a26;_x000D_
}_x000D_
_x000D_
svg.red stop:nth-child(1) {_x000D_
  stop-color: #c84f31;_x000D_
}_x000D_
svg.red stop:nth-child(2) {_x000D_
  stop-color: #dA3448;_x000D_
}

_x000D_

<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">_x000D_
  <linearGradient id="gradient">_x000D_
    <stop offset="0%" />_x000D_
    <stop offset="100%" />_x000D_
  </linearGradient>_x000D_
  <rect width="100" height="50" fill="url(#gradient)" />_x000D_
</svg>_x000D_
_x000D_
<br/>_x000D_
<button id="greenButton">Green</button>_x000D_
<button id="redButton">Red</button>

_x000D_

User · Answer

Thank you everyone  for all your precise replys  Using the svg in a shadow dom  I add the 3 linear gradients I need within the svg  inside a    I place the css fill rule on the web component and the inheritance od fill does the job   x000D   x000D       lt svg viewbox  0 0 512 512  xmlns  http   www w3 org 2000 svg  gt         lt path         d  m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z  gt  lt  path gt       lt  svg gt            lt svg height  0  width  0  gt         lt defs gt           lt linearGradient id  lgrad-p  gradientTransform  rotate 75   gt  lt stop offset  45   stop-color   4169e1  gt  lt  stop gt  lt stop offset  99   stop-color   c44764  gt  lt  stop gt  lt  linearGradient gt           lt linearGradient id  lgrad-s  gradientTransform  rotate 75   gt  lt stop offset  45   stop-color   ef3c3a  gt  lt  stop gt  lt stop offset  99   stop-color   6d5eb7  gt  lt  stop gt  lt  linearGradient gt           lt linearGradient id  lgrad-g  gradientTransform  rotate 75   gt  lt stop offset  45   stop-color   585f74  gt  lt  stop gt  lt stop offset  99   stop-color   b6bbc8  gt  lt  stop gt  lt  linearGradient gt         lt  defs gt       lt  svg gt            lt div gt  lt  div gt        lt style gt         first-child           height 150px          width 150px          fill url  lgrad-p  blue                div          position relative          width 150px          height 150px          fill url  lgrad-s  red               lt  style gt       lt script gt        const shadow   document querySelector  div   attachShadow  mode   open           shadow innerHTML   lt svg viewbox   0 0 512 512   gt            lt path d   m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z   gt  lt  path gt          lt  svg gt          lt svg height   0   gt          lt defs gt            lt linearGradient id   lgrad-s   gradientTransform   rotate 75    gt  lt stop offset   45    stop-color    ef3c3a   gt  lt  stop gt  lt stop offset   99    stop-color    6d5eb7   gt  lt  stop gt  lt  linearGradient gt            lt linearGradient id   lgrad-g   gradientTransform   rotate 75    gt  lt stop offset   45    stop-color    585f74   gt  lt  stop gt  lt stop offset   99    stop-color    b6bbc8   gt  lt  stop gt  lt  linearGradient gt          lt  defs gt        lt  svg gt               lt  script gt  x000D   x000D   x000D   The first one is normal SVG  the second one is inside a shadow dom

User · Answer

Here is how to set a linearGradient on a target element     lt style type  text css  gt      path fill url   MyGradient     lt  style gt   lt defs gt       lt linearGradient id  MyGradient  gt           lt stop offset  0   stop-color   e4e4e3   gt  lt  stop gt           lt stop offset  80   stop-color   fff   gt  lt  stop gt       lt  linearGradient gt   lt  defs gt

User · Answer

Just use in the CSS whatever you would use in a fill attribute  Of course  this requires that you have defined the linear gradient somewhere in your SVG   Here is a complete example    x000D   x000D  rect   x000D      cursor  pointer  x000D      shape-rendering  crispEdges  x000D      fill  url  MyGradient   x000D    x000D   lt svg width  100  height  50  version  1 1  xmlns  http   www w3 org 2000 svg  gt  x000D         lt style type  text css  gt  x000D          rect fill url  MyGradient   x000D         lt  style gt  x000D         lt defs gt  x000D           lt linearGradient id  MyGradient  gt  x000D             lt stop offset  5   stop-color   F60    gt  x000D             lt stop offset  95   stop-color   FF6    gt  x000D           lt  linearGradient gt  x000D         lt  defs gt  x000D         x000D         lt rect width  100  height  50   gt  x000D       lt  svg gt  x000D   x000D   x000D

User · Answer

Building on top of what Finesse wrote  here is a simpler way to target the svg and change it s gradient   This is what you need to do    Assign classes to each color stop defined in the gradient element  Target the css and change the stop-color for each of those stops using plain classes  Win    Some benefits of using classes instead of  nth-child is that it ll not be affected if you reorder your stops  Also  it makes the intent of each class clear - you ll be left wondering whether you needed a blue color on the first child or the second one   I ve tested it on all Chrome  Firefox and IE11    x000D   x000D   main-stop   x000D    stop-color  red  x000D    x000D   alt-stop   x000D    stop-color  green  x000D    x000D   lt svg class  green  width  100  height  50  version  1 1  xmlns  http   www w3 org 2000 svg  gt  x000D     lt linearGradient id  gradient  gt  x000D       lt stop class  main-stop  offset  0     gt  x000D       lt stop class  alt-stop  offset  100     gt  x000D     lt  linearGradient gt  x000D     lt rect width  100  height  50  fill  url  gradient     gt  x000D   lt  svg gt  x000D   x000D   x000D    See an editable example here  https   jsbin com gabuvisuhe edit html css output

User · Answer

2019 Answer With brand new css properties you can have even more flexibility with variables aka custom properties  x000D   x000D   shape     width 500px    height 200px      shape  gradient-bg     fill  url  header-shape-gradient   fff      header-shape-gradient     --color-stop   f12c06    --color-bot   faed34    x000D   lt svg viewBox  0 0 100 100  xmlns  http   www w3 org 2000 svg  preserveAspectRatio  none  class  shape  gt     lt defs gt       lt linearGradient id  header-shape-gradient  x2  0 35  y2  1  gt           lt stop offset  0   stop-color  var --color-stop     gt           lt stop offset  30   stop-color  var --color-stop     gt           lt stop offset  100   stop-color  var --color-bot     gt         lt  linearGradient gt     lt  defs gt     lt g gt       lt polygon class  gradient-bg  points  0 0 100 0 0 66    gt     lt  g gt   lt  svg gt  x000D   x000D   x000D   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    quot  f5f7f9 quot

[css] SVG gradient using CSS

Examples related to css

Examples related to svg

Examples related to gradient

Examples related to linear-gradients