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

user_1138486 0
Viewed 16894

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:

enter image description here

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

Something similar to this:

enter image description here Thanks

linear-gradients gradient css
3 Answers

you don't have to repeat the colors. It's also possible to write it like this:

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