Perfect Sphere

HTML
<div class="sphere"></div>
SCSS
html, body { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse at center, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%); } .sphere { width: 300px; height: 300px; position: relative; border-radius: 100%; background: radial-gradient(#f08, salmon); &::after, &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; } &::after { background: radial-gradient( closest-side at 40% 40%, rgba(#fff, .75), transparent); } &::before { background: radial-gradient( farthest-side at 95% 95%, rgba(#fff, .35), transparent); } }
JAVASCRIPT
Expand for more options Login