Generate solid colors using CSS linear-gradient (not smooth colors)

Question

Assuming my linear CSS gradient looks like this:

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

It will generate a CSS gradient that looks like this:

How do I make the same gradient but with solid colors without the transitioning between the colors? (using CSS)

Something similar to this:

Thanks

Answer 1

Like this

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}

<div class="gradient"></div>