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

2019 Answer

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

_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_

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
  <defs>
    <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
        <stop offset="0%" stop-color="var(--color-stop)" />
        <stop offset="30%" stop-color="var(--color-stop)" />
        <stop offset="100%" stop-color="var(--color-bot)" />
      </linearGradient>
  </defs>
  <g>
    <polygon class="gradient-bg" points="0,0 100,0 0,66" />
  </g>
</svg>

_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', "#f5f7f9");

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

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

Here is a solution where you can add a gradient and change its colours using only CSS    x000D   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        gt  svg setAttribute  class    green     x000D  document querySelector   redButton   addEventListener  click        gt  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   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 offset  0     gt  x000D       lt 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   lt br  gt  x000D   lt button id  greenButton  gt Green lt  button gt  x000D   lt button id  redButton  gt Red lt  button gt  x000D   x000D   x000D

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

[css] SVG gradient using CSS

2019 Answer

Examples related to css

Examples related to svg

Examples related to gradient

Examples related to linear-gradients