Svg Gradient Using CSS

Fill an SVG shape with a gradient

As commented by Paul LeBeau, you need to convert the wavy shape to one path, then you can fill the wavy shape with a linear gradient as shown in this example:

<svg viewbox="7.5 0 60 10">  <defs>    <linearGradient id="gradient">      <stop offset="5%" stop-color="#FFC338" />      <stop offset="95%" stop-color="#FFEA68" />    </linearGradient>  </defs>  <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" /></svg>

How to define SVG gradient in page-global CSS file

Is there any way to define the linear gradient in the page-global CSS?

No. You can style some of the linearGradient properties with CSS, but you can't define the gradient itself.

If not, and if I were to define the linear gradient using a element within each SVG, is it OK for them to have the same ID?

If you mean more than one linearGradient with the same id, then No. id attributes must be unique.

If not, how can I declare a single with an ID outside of any SVG? Is it possible to have a “dummy” SVG that defines only the gradient and the CSS can refer to that gradient by its ID?

You can define a linearGradient in one inline SVG and access it from another. You can use CSS to assign the gradient.

svg rect {  fill: url(#mygradient);}
#mygradient stop.start-color {  stop-color: red;}
#mygradient stop.end-color {  stop-color: blue;}

<svg width="0" height="0">  <defs>    <linearGradient id="mygradient">      <stop offset="0" class="start-color"/>      <stop offset="1" class="end-color"/>    </linearGradient>  </defs></svg>
<svg>  <rect width="300" height="150"/></svg>

Reproducing SVG gradient equivalent to CSS gradient with linear-gradient

When you have 2 colors the percentages are 0% and 100%

.box {
  height:200px;
  background:
    linear-gradient(to right,red,blue) top/100% 40%,
    linear-gradient(to right,red 0%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

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

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>

SVG modifying gradient to an element that is reused with use

Two observations:

You need to define 2 gradients and choose which one with a variable: fill: var(--grd);
You don't fill the <polygon> you need to reuse. You fill the <use> element.

I hope it helps.

svg {width: 250px; height:200px;border:1px solid}:root {  --grd: url(#gradient);}.second{--grd: url(#gradient2);}
use {  fill: var(--grd);}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <linearGradient id="gradient">        <stop offset="0%" stop-color="orange"/>        <stop offset="100%" stop-color="red" />      </linearGradient>   <linearGradient id="gradient2">        <stop offset="0%" stop-color="lime"/>        <stop offset="100%" stop-color="green" />      </linearGradient>    <polygon id="triangle" points="0,0 100,0 0,66" />   </defs>  <use class="use-triangle" xlink:href="#triangle" /></svg><svg class="second" viewBox="0 0 100 100"> <use class="use-triangle" xlink:href="#triangle" /></svg>

Is it possible to fill an svg with a gradient color or background image?

I got it working by having the gradient within the SVG:

#instagram:hover path {
  fill: url(#myGradient);
}

<svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" id="instagram" viewBox="0 0 24 24" width="240px" height="240px">
  <path d="M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z"/>
  <defs>
    <linearGradient id="myGradient">
       <stop offset="5%" stop-color="#F60" />
       <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>
</svg>

How to apply a color gradient to an .SVG image?

For example, I took a black and white icon

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">            <path id="icon" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46 s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194 C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008 c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006 c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003 c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019 c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999 s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984 C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427 c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003 C42,36.923,42,36.736,41.605,36.414z">   </path>    </svg>