Comment créer un dégradé avec 3 couleurs en CSS sans escalade de couleur

Question

Dans cet exemple, j'ai un dégradé de 2 couleurs, aligné à droite.

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

Est-il possible d'avoir plus de 2 couleurs? Par exemple, puis-je ajouter une couleur rouge à droite du second?

Answer 1

Bien sûr, il suffit d'ajouter des arrêts de couleur à chaque (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

Vous pouvez utiliser plusieurs arrière-plans, comme ceci:

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

Voir aussi ceci codepen pour beaucoup de combinaisons.