How to create a gradient with 3 colors in CSS without color escalation

Question

In this example I have a gradient of 2 colors, alignd to right.

background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);

Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?

Solution 1

Sure, just add color stops at every (100/numColors)%

div {
  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
  width: 100%;
  height:64px;
}

<div></div>

Solution 2

You can use multiply background, like this:

background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);

Also see this codepen for much combinations.