HTML CSS Result Skip Results Iframe
:root {
  --translate: 100px;
}

.background,
.mid,
.foreground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background {
  background: radial-gradient(circle at center, lightgrey 25%, transparent calc(25% + 1px));
  background-size: 2rem 2rem;
}

.mid {
  background: radial-gradient(circle at 15% 35%, darkorchid 6%, transparent calc(6% + 1px)),
    radial-gradient(circle at 35% 25%, darkorchid 5%, transparent calc(5% + 1px)),
    radial-gradient(circle at 45% 85%, darkorchid 5%, transparent calc(5% + 1px)),
    radial-gradient(circle at 65% 65%, darkorchid 6%, transparent calc(6% + 1px));
}

.foreground {
  background: radial-gradient(circle at 75% 25%, deeppink 15%, transparent calc(15% + 1px)),
    radial-gradient(circle at 25% 75%, deeppink 10%, transparent calc(10% + 1px));
}

.mid {
  --translate: 250px;
}

.foreground {
  --translate: 500px;
}

@media (prefers-reduced-motion: no-preference) {
  .background,
  .mid,
  .foreground {
    height: calc(100% + var(--translate));
    animation: parallax linear;
    animation-timeline: scroll(root);
  }
}

@keyframes parallax {
  from { transform: 0; }
  to { transform: translateY(calc(var(--translate) * -1)); }
}

@layer base {
  * {
    box-sizing: border-box;
  }
  
  body {
    min-height: 300vh;
    margin: 0;
  }
}