3D Perfect Sphere

HTML
<div class="sphere"></div>
SCSS
$main-color: #1bcdd0; $gray: #ebebeb; $dark-gray: #1d1f20; $black: #000; div { margin: 20px; display: inline-block; } html, body { height: 100%; width: 100%; } body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .sphere { position: relative; width: 150px; height: 150px; background: #3bf8fb; border-radius: 50%; box-shadow: inset 26px -37px 38px 42px rgba(5, 142, 144, 0.5), inset 9px -7px 35px -11px rgb(156, 250, 255), inset 28px -21px 58px 4px rgba(0, 0, 0, 0.73); &::after { background: rgba(4, 55, 56, 0.6); top: 136px; border-radius: 50%; position: absolute; height: 24px; width: 150px; left: -29px; content: ''; z-index: -1; filter: blur(9px); } &::before { background: rgba(34, 110, 111, 0.57); top: 143px; border-radius: 50%; position: absolute; height: 14px; width: 106px; left: 8px; content: ''; z-index: -1; filter: blur(4px); box-shadow: -12px -4px 30px -1px #5c9fa0; } }
JAVASCRIPT
Expand for more options Login