<div class="frame">
  <canvas class="pixel-gradient" width="10" height="10"></canvas>
  <canvas class="pixel-gradient" width="10" height="10" style="position:absolute;filter:blur(40px) saturate(140%);top:0;z-index:-1;"></canvas>
</div>

body {
  margin: 0;
  background: #100212;
  text-align: center;
  color: white;
  font-family: monospace;
  transform: skewY(-5deg);
  font-size: min(200%, 5vw);
}

h1 {
  color: transparent;
  -webkit-text-stroke: 0.05em white;
}

.frame {
  position: relative;
  margin: 5em auto;
  max-width: min(500px, 95vw);
  background-color: white;
  border: 5px solid;
  border-radius: 12.5%;
  box-sizing: border-box;
  animation: superpower 5s linear infinite;
}
.frame > * {
  border-radius: calc(12.5% - 5px); /* 1 canvas pixel - border size */
}

canvas {
  display: block;
  width: 100%;
  height: 100%;

  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes superpower {
  from {
    filter: hue-rotate(0deg) contrast(50%) brightness(130%) saturate(140%);
  }
  to {
    filter: hue-rotate(360deg) contrast(50%) brightness(130%) saturate(140%);
  }
}

document.querySelectorAll("canvas.pixel-gradient").forEach((canvas) => {
  const ctx = canvas.getContext("2d");
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

  const gradientValues = [
    "#CC99C9",
    "#9EC1CF",
    "#9EE09E",
    "#FDFD97",
    "#FEB144",
    "#FF6663"
  ];
  gradientValues.forEach((value, index) => {
    const stopPosition = (1 / gradientValues.length) * (index + 1);
    gradient.addColorStop(stopPosition, value);
  });

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});