body{
background: -webkit-gradient(linear,left top,right top,from(#A34FFE),to(#5934FC));
}
.wrapper {
overflow: hidden;
width: 400px;
height: 400px;
background-color: #FFF;
border-radius: 100%;
margin: 50px auto;
}
.ripple_circle{
z-index: 1;
position: relative;
width: 340px;
height: 340px;
background: -webkit-radial-gradient(circle,#FDC800,#FF4137);
background: -moz-radial-gradient(circle,#FDC800,#FF4137);
background: -o-radial-gradient(circle,#FDC800,#FF4137);
background: radial-gradient(circle,#FDC800,#FF4137);
top: 30px;
left: 30px;
border-radius: 100%;
-webkit-box-shadow: -2px 3px 26px 0 #FF4137;
box-shadow: -2px 3px 26px 0 #FF4137;
}
#ripple, #ripple2, #ripple3 {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.4);
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.4);
box-shadow: 0 0 20px rgba(255,255,255,.4);
position: absolute;
bottom: 50%;
margin-bottom: -326px;