色のエスカレーションなしでCSSで3色のグラデーションを作成する方法

Question

この例では、右に揃えられた2色のグラデーションがあります。

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

2色以上にする方法はありますか？たとえば、2番目の色の右側に赤色を追加できますか？

Answer 1

確かに、（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>

Answer 2

次のように、乗算背景を使用できます。

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

多くの組み合わせについては、この codepen も参照してください。