Perfect Sphere #2

HTML
<section class="stage"> <figure class="sphere"> <span class="shadow"></span> </figure> </section>
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%; }
JAVASCRIPT
Expand for more options Login