Fill an SVG shape with a gradient

css svg linear-gradients

22,888

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>

22,888

Author by

Shahid

Updated on July 09, 2022

Comments

Shahid almost 2 years
How can I apply Linear gradient and drop shadow to this pattern?
```
<svg viewbox="0 0 60 10">
  <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
    <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" />
  </pattern>
  <rect x="0" y="0" width="60" height="7" fill="url(#waves)" />
</svg>
```
- Robert Longson almost 8 years
  
  What would it look like if you had a gradient and a pattern?
- Shahid almost 8 years
  
  gradient like in the image above and pattern same as u run the above code
- Robert Longson almost 8 years
  
  That's just a gradient. Where's the pattern.
- Shahid almost 8 years
  
  pattern u can see by running the code
- Shahid almost 8 years
  
  pattern is above now
- Robert Longson almost 8 years
  
  And we're back to my first question, what do they look like if you put them together?
- Shahid almost 8 years
  
  it is looking like this but i need that the same gradient as shown in the lower portion in the above part
- Paul LeBeau almost 8 years
  
  You would need to turn your patterned (wavy) rectangle into a mask. Then apply that to another rectangle that has the gradient fill.
Arif Burhan almost 8 years

I've just tried it, and it works for me ! Success !!
Shahid almost 8 years

how to add shadow to the upper side ?
noitseuq almost 7 years

Does anybody know why they always use in examples 5% and 95% instead of 0% and 100%? Just curious...
web-tiki almost 7 years

@noitseuq no real reason it doesn't make much difference in the output.