What's causing the linear-gradient to degrade in image quality when placed on Blogger?

HTML & CSS
1

Jsfiddle: Lined up


Blogger: The Gradient shifts, and it looses it’s hue, it becomes lesser.
https://testpage34567.blogspot.com/

https://i.imgur.com/RrQatew.png

2

After it is placed on blogger, the hue of the linear gradient drops/lessens dramatically.

How do I prevent this from happening?

3

Is there any possible way I can fix this so it stays the same?
https://testpage34567.blogspot.com/

.html
https://i.imgur.com/j6PcKZM.png

Blogger:
https://i.imgur.com/7WaloRI.png

<style>
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }
</style>

<div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 194px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton7');
var player = document.getElementById('player7');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"> </image>
    <image x="40" y="7" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>

    <svg width="260" height="194">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent"></stop>
          <stop offset="31.9%" stop-color="transparent"></stop>
          <stop offset="31.9%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="transparent"></stop>
          <stop offset="66.8%" stop-color="transparent"></stop>
          <stop offset="66.8%" stop-color="#0059dd"></stop>
          <stop offset="68.1%" stop-color="#0059dd"></stop>
          <stop offset="68.1%" stop-color="transparent"></stop>
          <stop offset="100%" stop-color="transparent"></stop>
        </lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="194"></rect>
    </svg>
  </svg>

  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>

  </div>

</div>

<audio id="player7" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.