<div class="container">
  <div class="background-3">
    <div class="circ-shadow"></div>
    <div class="sphere-1"></div>
    <div class="sphere-2"></div>
    <div class="triangle-1"></div>
    <div class="triangle-2"></div>
    <div class="circle-moon"></div>
    <div class="shadow-1"></div>
    <div class="shadow-2"></div>
    <div class="shadow-moon"></div>
  </div>
</div>
*{
  box-sizing: border-box;
}
.container {
  display: flex;
  position: relative;
  width: 540px;
  height: 660px;
  background: #dcdcdc;
  top: 5px;
  margin: 0 auto;
}
.background-3 {
  width: 294px;
  height: 294px;
  display: flex;
  position: absolute;
  left: 25%;
  top: 25%;
}
.circ-shadow{
  width: 294px;
  height: 294px;
  background: white;
  border-radius: 50%;
  display: flex;
  position: absolute;
  box-shadow: 0px 0px 60px grey;
  z-index: 1;
}
.sphere-1 {
  width: 294px;
  height: 294px;
  /* grey circle */
  background: #c8c8c8;
  position: relative;
  top: -50%;
  clip-path: circle(50% at 50% 100%);
  z-index: 1;
}
.sphere-2 {
  width: 294px;
  height: 294px;
  /* blue circle */
  background: #588bae;
  position: absolute;
  top: 50%;
  clip-path: circle(50% at 50% 0%);
  z-index: 1;
}
.triangle-1 {
  width: 98px;
  height: 193px;
  background: #025600;
  display: flex;
  position: absolute;
  top: -45px;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  z-index: 2;
}
.triangle-2 {
  width: 96px;
  height: 145px;
  background: #0f8525;
  position: absolute;
  top: 3px;
  left: 55px;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  z-index: 2;
}
.circle-moon {
  width: 75px;
  height: 75px;
  background: #a5b606;
  position: absolute;
  top: -25px;
  left: 200px;
  border-radius: 50%;
  z-index: 2;
}
.shadow-1 {
  width: 98px;
  height: 79px;
  background: #2b2857;
  position: absolute;
  top: 147px;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  z-index: 3;
}
.shadow-2 {
  width: 96px;
  height: 58px;
  background: #2b2857;
  position: absolute;
  top: 147px;
  left: 55px;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  z-index: 3;
}
.shadow-moon {
  width: 75px;
  height: 35px;
  background: #b2d094;
  opacity: 0.9;
  position: absolute;
  top: 190px;
  left: 200px;
  border-radius: 50%;
  box-shadow: 0px 0px 15px #b2d094;
  z-index: 3;
}

/* Minimalist Landscape Art Poster by WaterfallPrints

zazzle.com
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.