body {
  margin: 0;
  background: hsl(95, 37%, 82%);
  display: grid;
  grid-template-columns: 3fr 1fr;
  min-height: 100vh;
  align-items: center;
  justify-items: center;
}

ul {
  list-style: none;
  padding-left: 0;
}

.outer {
  position: relative;
}

.inner {
  width: 100px;
  height: 1px;
  background: linear-gradient(to right, 
    hsl(127, 75%, 25%) 0%,
    hsl(127, 75%, 20%) 25%,
    hsl(127, 75%, 53%) 100%);
}

.inner:first-child {
  border-radius: 50%;
  height: 36px;
  position: absolute;
  top: -18px;
  background: hsl(127, 75%, 38%);
}

.inner:nth-last-child(2) {
  border-radius: 50%;
  height: 36px;
  position: absolute;
  bottom: -18px;
}

.inner:last-child {
  height: 36px;
  position: absolute;
  border-radius: 50%; 
  z-index: -1;
  transform: translate(-60%, -94%) scale(4, 1.5) rotate(20deg);
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .2) 30%,
    rgba(0, 0, 0, .6) 65%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0) 100%);
  filter: blur(1px);
}