<div class="box">Normal</div>
<div class="box revised">Revised</div>
.box {
  width: 200px;
  height: 200px;
  --gradient-colors: rgb(200, 0, 0), rgb(0, 200, 0);
  background-image: linear-gradient(var(--gradient-colors));
  display: grid;
  place-items: center;
  margin: 5px;
}
.revised {
  --gradient-colors: hsl(0, 100%, 39%), hsl(60, 100%, 50%), hsl(120, 100%, 39%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.