<div class="grid">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

<div class="unsupported">This browser does not support the CSS random() function, this demo will not work. You can try it in <a href="https://developer.apple.com/safari/resources/">Safari Technology Preview</a>.</div>

body {
  background-color: black;
  margin: 0;
  padding: 0;
}
.grid {
  display: grid;
  --rows: 100;
  --columns: 100;
  grid-template-rows: repeat(var(--rows), 1fr);
  grid-template-columns: repeat(var(--columns), 1fr);
  width: 100vw;
  height: 100vh;
}

.rectangle {
  grid-area: random(1, var(--rows), 1) / random(1, var(--columns), 1);
  background-color: lch(100% 90% random(0deg, 360deg));
}

.unsupported {
  text-align: center;
  font-family: system-ui;
  background-color: rgba(255,0,0,0.2);
  padding: 1em;
  border-radius: 10px;
}

@supports (width: random(0vw, 100vw)) {
  .unsupported {
    display: none;
  }
}