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