SVG Gradient

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="300">
    <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
      <stop offset="10%" style="stop-color:rgb(29,178,171);stop-opacity:1" />
      <stop offset="20%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
      <stop offset="30%" style="stop-color:rgb(29,178,171);stop-opacity:1" />
      <stop offset="40%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(29,178,171);stop-opacity:1" />
      
      <stop offset="60%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
      <stop offset="70%" style="stop-color:rgb(29,178,171);stop-opacity:1" />
      
      <stop offset="80%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
      <stop offset="90%" style="stop-color:rgb(29,178,171);stop-opacity:1" />
      
      <stop offset="100%" style="stop-color:rgb(54,253,245);stop-opacity:1" />
    </linearGradient>
    
            <radialGradient id="myRadialGradient4"
           fx="50%" fy="50%" r="55%"
           spreadMethod="pad">
          <stop offset="50%"   stop-color="rgb(54,253,245)" stop-opacity="1"/>
          <stop offset="100%" stop-color="rgb(29,178,171)" stop-opacity="1" />
        </radialGradient>
    <filter id="shadow" x="-20%" y="-20%" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
			<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="
			1 0 0 0 0
      		0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0"/>
			<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"/>
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
		</filter>
    
  </defs>

<g  class="arc2" id="bm_ring" transform="skewX(0)  skewY(0)">
<path...

CSS

rect { fill: url(#grad1); }
text { fill: url(#grad1); }