0

I am working off the template to put together a landing page and wanted to introduce gradient background. Header background is split into one rectangle shape + SVG wave. I can make gradient work on a rectangle but not on the SVG shape. I want them both to tie as one image flowing nicely. How to get this done?

Code for SVG wave:

<svg class="header-frame" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 310"><defs><style>.cls-1{fill:#000;}</style></defs><title>header-frame</title><path class="cls-1" d="M0,283.054c22.75,12.98,53.1,15.2,70.635,14.808,92.115-2.077,238.3-79.9,354.895-79.938,59.97-.019,106.17,18.059,141.58,34,47.778,21.511,47.778,21.511,90,38.938,28.418,11.731,85.344,26.169,152.992,17.971,68.127-8.255,115.933-34.963,166.492-67.393,37.467-24.032,148.6-112.008,171.753-127.963,27.951-19.26,87.771-81.155,180.71-89.341,72.016-6.343,105.479,12.388,157.434,35.467,69.73,30.976,168.93,92.28,256.514,89.405,100.992-3.315,140.276-41.7,177-64.9V0.24H0V283.054Z"/></svg>

Code for bckg rectangle

background: #2F7336;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #AA3A38, #2F7336);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #AA3A38, #2F7336); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Effect looks like this in solid colors, i want this to be all gradient

Click for the image

Thanks for helping out!

olekskw
  • 1
  • Please read about [svg gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) – enxaneta May 22 '20 at 13:54
  • the duplicate consider animated gradient, but remove the animation part and you have what you need to add gradient to your SVG – Temani Afif May 22 '20 at 13:56

0 Answers0