body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#ball-1, #ball-2 {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
#ball-1 {
  top: 22%;
  background-color: #ff2d89;
  box-shadow: 0 0 30px 30px rgba(255, 45, 137, 0.2);
}
#ball-2 {
  top: calc(100% - 22% - 100px);
  background-color: #00a3ff;
  box-shadow: 0 0 30px 30px rgba(0, 163, 255, 0.2);
}

#ball-1::after, #ball-2::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px dashed lightgrey;
  pointer-events: none;
}