CSS
html, body {
height: 100%;
width: 100%;
margin: 20px auto;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.sphere {
display: block;
background: black;
margin: 0;
border-radius: 50%;
height: 300px;
width: 300px;
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
.sphere .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%,
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0) 50%);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
.stage {
width: 300px;
height: 300px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
