JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="stage">
  <div class="ball"></div>
  <div class="ball move"></div>
</div>
<div class="overlay"></div>

CSS

@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(300px);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background: black;
  background: linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, .8) 75%) 0 0, linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, .8) 75%) 0 0, linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, .8) 75%) 7px -15px, linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, .8) 75%) 7px -15px, #36c;
  background-size: 15px 30px
}

.stage {
  filter: contrast(100);
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: white;
  position: relative;
  mix-blend-mode: multiply;
}

.overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: hotpink;
  mix-blend-mode: screen;
  z-index: 2;
}

.ball {
  position: absolute;
  top: 0;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: black;
  filter: blur(20px);
  z-index: 1;
}

.move {
  animation-duration: 1s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}