<div class="headerContainer">
  <div id="container">
    <button onClick="init()">New Gradient</button>
  </div>
</div>

body {
  margin: 0;
  background-color: #fff;
  font-family: "Oswald", sans-serif;
}

button {
  position: fixed;
  left: 10px;
  top: 10px;
  padding: 1rem;
}

.headerContainer {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.invitationOverlay {
  position: absolute;
  padding: 24px;
  //background-color: rgba(255, 255, 255, 0.5);
  left: 65%;
  bottom: 30%;
  color: #fff;
}

h1 {
  font-size: 85px;
  line-height: 87px;
  font-weight: 800;
  margin: 0 0 20px 0;
  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
}

h2 {
  font-size: 50px;
  line-height: 52px;
  font-weight: 400;
  margin: 0 0 40px 0;
  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
}

p {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.statsBarOuter {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  background: rgba(12, 22, 45, 0.3);
}

.statsBarInner {
  padding: 20px;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.statItem {
  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
}

.light {
  font-weight: 300;
  color: #a675b3;
  font-size: 1.5rem;
}

.button {
  display: inline;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button {
  box-shadow: inset 0 1px 1px rgb(111 55 125 / 80%),
    inset 0 -1px 0px rgb(63 59 113 / 20%), 0 9px 16px 0 rgb(0 0 0 / 30%),
    0 4px 3px 0 rgb(0 0 0 / 30%), 0 0 0 1px #150a1e;
  background-image: linear-gradient(#3b2751, #271739);
  text-shadow: 0 0 21px rgb(223 206 228 / 50%), 0 -1px 0 #311d47;
  animation: bounceInDown 900ms 200ms ease-in-out both;
  width: 150px;
  height: 40px;
  text-decoration: none;
  outline-width: 0px;
  z-index: 990;
  color: #a675b3;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 10px 40px;
  font-size: 1rem;
}

.button.active,
.button:active {
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #170c22,
    0 2px 1px 0 rgba(121, 65, 135, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
  background-image: linear-gradient(#1f132e, #311d47);
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5),
    0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
  color: #e4e3ce;
}

.blue {
  box-shadow: inset 0 1px 1px rgb(95 96 151 / 80%),
    inset 0 -1px 0px rgb(63 59 113 / 20%), 0 9px 16px 0 rgb(0 0 0 / 30%),
    0 4px 3px 0 rgb(0 0 0 / 30%), 0 0 0 1px #5f5f97;
  background-image: linear-gradient(#272951, #171c39);
  text-shadow: 0 0 21px rgb(223 206 228 / 50%), 0 -1px 0 #1d2047;
  color: #9293b7;
}

.blue.active,
.blue:active {
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #0c0d22,
    0 2px 1px 0 rgba(160, 160, 195, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
  background-image: linear-gradient(#13132e, #1e1d47);
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5),
    0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #16153c;
  color: #e4e3ce;
}

var headerContainer = document.querySelector(".headerContainer");
function init() {
  var previousCanvas = document.getElementById("canvas");

  if (previousCanvas) {
    previousCanvas.remove();
  }
  // TEMPORARY CANVAS
  // this is the canvas for mapping the gradient
  // ======================
  const tempCanvas = document.createElement("canvas");
  tempCanvas.setAttribute("id", "canvas");
  var ctx = tempCanvas.getContext("2d");

  const width = headerContainer.offsetWidth;
  const height = headerContainer.offsetWidth;

  const halfWidth = Math.floor(width * 0.5);
  const halfHeight = Math.floor(height * 0.5);

  const gradientRange = Math.sqrt(width ** 2 + height ** 2);

  // Size the canvas to match viewport
  tempCanvas.width = width;
  tempCanvas.height = height;

  // Create a gradient for the fill
  var grd = ctx.createRadialGradient(
    THREE.Math.randFloat(-halfWidth / 2, halfWidth / 2) + halfWidth,
    height,
    THREE.Math.randFloat(5, 100),
    halfWidth,
    height,
    gradientRange
  );
  var firstColorR = Math.floor(Math.random() * 255);
  var firstColorG = Math.floor(Math.random() * 255);
  var firstColorB = Math.floor(Math.random() * 255);

  var numOfGradientBands = Math.floor(THREE.Math.randFloat(2, 4));
  grd.addColorStop(
    0.25,
    "rgb(" + firstColorR + "," + firstColorG + ", " + firstColorB
  );
  if (numOfGradientBands == 3) {
    grd.addColorStop(
      0.35,
      "rgb(" +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        ", " +
        Math.floor(Math.random() * 255)
    );
  }
  grd.addColorStop(
    0.45,
    "rgb(" +
      Math.floor(Math.random() * 255) +
      "," +
      Math.floor(Math.random() * 255) +
      ", " +
      Math.floor(Math.random() * 255)
  );

  // Render gradient across whole fill covering canvas
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, width, height);
  var pixels = [];

  // * For debugging, render the gradient canvas to see the gradient
  document.body.appendChild(tempCanvas);
}

init();