How can I change the css properties of the circle element here to make it look more 3d? 

#chart-area {
 margin-left: auto;
 margin-right: auto;
 display: block;
}

#logo {
 height: 50px;
}

.navbar-brand {
 height: 60px;
 padding: 5px 0px;
}

\*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
}

body,
html {
overflow-x: hidden;
}

.circle {
 fill: radial-gradient(white, lightblue);
 filter: drop-shadow(15px 15px 15px gray);
 transition: transform 0.3s ease-in-out;
 background: linear-gradient(to bottom, #fff, #ffcccc);
 box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 border-radius: 70%;
}

.grid {
 stroke: #ddd;
 stroke-width: 1px;
 shape-rendering: crispEdges;
}

.xaxis {
 stroke: rgb(224, 64, 64);
 stroke-width: 1px;
 shape-rendering: crispEdges;
}

.yaxis {
 stroke: rgb(224, 64, 64);
 stroke-width: 1px;
 shape-rendering: crispEdges;
}
user