Was ist Linear Gradient/Linearer Farbverlauf?

Im CSS beschreibt ein Linear Gradient einen weichen Übergang zwischen mehreren Farben in einem bestimmten Muster. Linear Gradients haben diverse lineare Bewegungsmuster, anders als beim Radial Gradients. Dort gehen die Farbverläufe vom Mittelpunkt aus. Es müssen minimal 2 Farben angegeben werden in sogenannten stops, damit ein Farbverlauf erzeugt werden kann. Ebenso kann neben einem Startwert auch ein Winkel oder eine Richtung angegeben werden.
Der Syntax des Codes sähe dann wie folgt aus:
background: linear-gradient(direction, color-stop1, color-stop2, ..., color-stopN);

Beispiele:

Die Standard Richtung beim linearen Farbverlauf ist von oben nach unten.
Im Code sieht das ganze dann wie folgt aus(inklusive CSS Transtition):

.rect-default{
    margin: 0;
    float: left;
    margin-right: 20px;
    width: 100px;
    height: 50px;
    background: red;
    background: linear-gradient(black, red , yellow, green,
blue, purple, black);

   -webkit-transition: height 2s;
   transition: height 2s;
}
.rect-default:hover {
height: 50vh;
-webkit-transition: height 2s;
transition: height 2s;
}

Bei diesem Beispiel handelt es sich um ein Rechteck mit einem
linearen Farbverlauf von links nach rechts.
Im Code sieht das ganze dann wie folgt aus(inklusive CSS Transtition):

.rect-to-right {
    margin: 0;
    float: center;
    margin-right: 20px;
    width: 100px;
    height: 50px;
    background: red;
    background: linear-gradient(to right,black, red , yellow, green, blue, purple, black);

   -webkit-transition: width 2s;
    transition: width 2s;
}
.rect-to-right:hover {
    width: 100%;
   -webkit-transition:width 2s;
    transition:width 2s;
}

Ebenso die Diagonale Richtungist möglich.
Im Code sieht das ganze dann wie folgt aus(inklusive CSS Transtition):

.rect-to-bottom-right{
    margin: 0;
    float: right;
    margin-right: 20px;
    width: 100px;
    height: 50px;
    background: red;
    background:linear-gradient(to bottom right, black, red , yellow, green, blue, purple, black);

    -webkit-transition: width 4s; height 4s;
    transition: width 4s, height 4s;
}
.rect-to-bottom-right:hover {
    float: right;
    width: 150px;
    height: 150px;
}

Und als letztes Beispiel haben wir hier ein sich wiederholendes Muster. Dieses
Muster verhält sich ähnlich wie das default Muster,
sprich von oben nach unten.
Im Code sieht das ganze dann wie folgt aus:

.rect-repeat{
   height: 150px;
   background: red;
   background: repeating-linear-gradient(red, yellow 10%, green 20%);
}