<div class="box"></div>
<div class="box" style="--i:2"></div>
<div class="box" style="--i:1"></div>
<div class="box" style="--i:3"></div>
.box {
  --colors: red, blue, green, purple; /* color array */
  --n: 4; /* length of the array  */
  --i: 0; /* index of the color [0 to N-1] */
  width: 150px;
  aspect-ratio: 1;  
    linear-gradient(var(--colors)) no-repeat
     0 calc(var(--i)*100%/(var(--n) - 1))
     /100% calc(1px*infinity); /* yes infinity is doing the magic */

/* we can easily get the index of the color */
.box:before {
  content: "Index: " counter(index);
  counter-reset: index var(--i);
  color: #fff;
  font:  bold 1.5em sans-serif;
  padding: .5em;
  display: block;
  text-align: center;

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  place-content: center;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.