<header>
  <h1>Gradient Color Interpolation</h1>
</header>

<div class="container">
  <div class="item">
    <div class="demo demo01"></div>
    <p>shortest</p>
  </div>

  <div class="item">
    <div class="demo demo02"></div>
    <p>longest</p>
  </div>

  <div class="item">
    <div class="demo demo03"></div>
    <p>increasing</p>
  </div>

  <div class="item">
    <div class="demo demo04"></div>
    <p>decreasing</p>
  </div>
</div>

body {
  font-family: system-ui, sans-serif;
  margin: 0 2em;
}

.container {
  display: flex;
  flex-flow: column;
  justify-content: center;

  margin: 0 auto;
  width: 90vw;
  gap: 5em;
}

h1 {
  margin-bottom: 3rem;
}

/*
Set up the basic dimensions for each box we'll use for the demo
*/
.demo {
  /* setup to align items to center of div*/
  display: flex;
  flex-flow: column;
  width: 600px;
  height: 100px;
}

.item {
  border: 5px solid black;
  margin-bottom: 2rem;
  width: min-content;
}

.item p {
  margin: 1em;
  font-size: 1.5rem;
}

.demo01 {
  background: linear-gradient(to right in oklch shorter hue, cyan, blue);
}

.demo02 {
  background: linear-gradient(to right in oklch longer hue, cyan, blue);
}

.demo03 {
  background: linear-gradient(to right in oklch increasing, cyan, blue);
}

.demo04 {
  background: linear-gradient(to right in oklch decreasing hue, cyan, blue);
}