Generate solid colors using a linear CSS gradient (non-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 to make the same gradient, but with solid colors without switching between colors? (using CSS)

thank

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>

Run codeHide result

Answer 2

, %, . , , , , @fen1x. , , - , pixeleted.

div {
  width: 500px;
  height: 300px;
  background: linear-gradient(280deg, #D4FF00 0%, #D4FF00 50%, #800000 50%, #000000 100%);
}

<div></div>

Hide result