SVG gradient color

Hi I'm working with SVG here I trying to add the gradient to SVG like this

white and grey gradient but I unable to achieve the desired output. Can anyone point me in the right direction.

<svg viewBox="0 0 400 400">
                                <defs>  
          <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat">
      <stop offset="0.05" stop-color="#fff" stop-opacity="0"/>
      <stop offset="1" stop-color="#777" stop-opacity="1"/>
    </linearGradient>
          </defs>
    <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
 </svg>

<svg viewBox="0 0 700 700" class="bubble-svg">
        <defs>

                <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)">
                        <stop offset="0%" stop-color="#fff" stop-opacity="0"/>
                        <stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/>
                        <stop offset="20%" stop-color="#fff" stop-opacity="0"/>
                        <stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/>
                        <stop offset="40%" stop-color="#fff" stop-opacity="0"/>
                        <stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/>

                        <stop offset="60%" stop-color="#fff" stop-opacity="0"/>
                        <stop offset="70%" stop-color="#bdbdbd" stop-opacity="0.5"/>
                        <stop offset="80%" stop-color="#bdbdbd" stop-opacity="0"/>
                        <stop offset="100%" stop-color="#fbfbfb" stop-opacity="0.5"/>

                </linearGradient>
        </defs>
        <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>

from SVG gradient color