Farbverläufe

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

Verläufe in CSS ermöglichen es Ihnen, fließende Übergänge zwischen zwei oder mehr Farben zu 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);
}

Dies erzeugt einen Farbverlauf, der von Orange (#ff9966) oben zu einer rötlichen Farbe (#ff5e62) unten übergeht.

Sie können auch die Richtung angeben und mehrere Farben verwenden, wie im folgenden Beispiel:

/* Erstellen Sie 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 Gradienten-Hintergrund anwendet. Der Gradient soll:

Von oben nach unten verlaufen
Mit der Farbe #FFD700 (gold) beginnen
Zu #FF4500 (orangered) ü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>