Farbverläufe

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 21 von 43.

Mit Farbverläufen in CSS kannst du sanfte Übergänge zwischen zwei oder mehr Farben erstellen.

Beginnen wir mit einem einfachen linearen Farbverlauf:

/* Erstelle einen linearen Farbverlauf von oben nach unten */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Dadurch entsteht ein Farbverlauf von Orange (#ff9966) oben zu einer rötlichen Farbe (#ff5e62) unten.

Die Richtung ist optional. Wenn du sie weglässt, verläuft linear-gradient() von oben nach unten, genau wie bei to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* von oben nach unten */

Du kannst auch die Richtung angeben und mehrere Farben verwenden, wie im folgenden Beispiel:

/* Erstelle einen linearen Farbverlauf von links nach rechts */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Aufgabe

Einfach

Erstelle eine CSS-Regel für eine Klasse namens sunset-gradient, die einen linearen Farbverlauf als Hintergrund anwendet. Der Farbverlauf soll:

Von oben nach unten verlaufen
Mit der Farbe #FFD700 (Gold) beginnen
Zu #FF4500 (Orangerot) übergehen

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>