title: transparent linear gradient looking strange in safari
body: <p>I have this dotted pattern, where I would like to fade the bottom out. I use a pseudoelement with a linear gradient from transparent to the color of the background.</p>
  <p>In firefox it looks good, but in safari (14.1.1) it for some reason looks strange like this</p>
  <p><a href="https://i.stack.imgur.com/q2pL7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q2pL7.png" alt="enter image description here" /></a></p>
  <p>Anyone know how to fix this?</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>        :root {
              --main-color:#05e2ff
          }
  
          body {
              background-color: var(--main-color);
          }
  
          .line {
              position:relative;
              margin:0 auto;
              height:50vh;
              width:20px;
              background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2300B4D0'/%3E%3C/svg%3E%0A");
          }
  
          .line::after {
              content:'';
              display:block;
              position:absolute;
              width:100%;
              height:50%;
              bottom:0;
              left:0;
              background:linear-gradient(to bottom, transparent, var(--main-color));
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="line"&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>