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;
}
}
