title: How to fix gradient color on SVG
body: <p>I am a beginner and I am trying to use gradient color on SVG. But the color is not matching with the previous div.</p>
  <p>I have used gradient color on <code>.test</code> and the color is:</p>
  <pre><code>background: linear-gradient(
      60deg,
      rgba(84, 58, 183, 1) 0%,
      rgba(0, 172, 193, 1) 100%
    );
  </code></pre>
  <p>I have used SVG on <code>.test-2</code> div. I want it seems like there is no partition between the two divs.</p>
  <p>Here is an image:</p>
  <p><a href="https://i.stack.imgur.com/dqTRq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqTRq.png" alt="enter image description here" /></a></p>
  <p>My Codes:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
  .test {
    background: linear-gradient(
      60deg,
      rgba(84, 58, 183, 1) 0%,
      rgba(0, 172, 193, 1) 100%
    );
    width: 100%;
    height: 65vh;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
    &lt;h1&gt;Demo Text&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aspernatur nemo accusantium soluta quidem cum obcaecati amet, deserunt, quo cupiditate quam vel excepturi quas laboriosam consequuntur sapiente! Necessitatibus, nesciunt quae non, optio cumque assumenda commodi minima qui quo animi a! Laudantium inventore vero est sunt. Facere incidunt quisquam debitis ipsa maiores totam excepturi nesciunt perferendis repudiandae eum. Esse tenetur nemo asperiores nihil autem dolor atque molestias amet quaerat consequatur? Iste delectus culpa atque voluptates debitis voluptatem fuga, ab mollitia earum quibusdam ipsum numquam soluta, quia molestiae animi nisi obcaecati rem aliquid amet? Quam beatae sunt ad dolores numquam magni ratione!&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="test-2"&gt;
    &lt;svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 300" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;&lt;defs&gt;&lt;linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0" gradientTransform="rotate(60)"&gt;&lt;stop stop-color="rgba(84, 58, 183, 1)" offset="0%"&gt;&lt;/stop&gt;&lt;stop stop-color="rgba(0, 172, 193, 1)" offset="100%"&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,30L80,65C160,100,320,170,480,200C640,230,800,220,960,180C1120,140,1280,70,1440,80C1600,90,1760,180,1920,205C2080,230,2240,190,2400,165C2560,140,2720,130,2880,105C3040,80,3200,40,3360,55C3520,70,3680,140,3840,170C4000,200,4160,190,4320,180C4480,170,4640,160,4800,150C4960,140,5120,130,5280,115C5440,100,5600,80,5760,85C5920,90,6080,120,6240,140C6400,160,6560,170,6720,145C6880,120,7040,60,7200,70C7360,80,7520,160,7680,200C7840,240,8000,240,8160,215C8320,190,8480,140,8640,105C8800,70,8960,50,9120,65C9280,80,9440,130,9600,130C9760,130,9920,80,10080,70C10240,60,10400,90,10560,100C10720,110,10880,100,11040,115C11200,130,11360,170,11440,190L11520,210L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I do that?</p>
  <p><em>[Please run the snippet in full screen]</em></p>