CSS-Farbverlauf mit zwei Farben und Winkel erzeugen

Geben Sie zwei Farbwerte ein, wählen Sie optional linear oder exakt radial und setzen Sie bei einem linearen Verlauf bei Bedarf den Winkel. Anschließend erhalten Sie den passenden CSS-Text für den Farbverlauf.

CSS-Farbverläufe aus zwei Farben erstellen

Mit dem Gradient Generator erstellen Sie CSS-Text für einen linearen oder radialen Farbverlauf aus zwei Farbwerten und optional einem Winkel. Das ist praktisch, wenn Sie einen Verlauf für eine Website oder ein anderes CSS-Projekt vorbereiten möchten, ohne die Schreibweise jedes Mal von Hand zusammenzusetzen. Als Eingaben dienen zwei Farbwerte; zusätzlich können Sie den Verlaufstyp und den Winkel festlegen.

Vorgehensweise

1. Tragen Sie den ersten Farbwert ein, zum Beispiel #ff6b6b, und anschließend den zweiten Farbwert, zum Beispiel #4ecdc4. Die Werte werden in den erzeugten CSS-Text übernommen. Eine gesonderte Prüfung, ob die Eingaben gültige CSS-Farben sind, findet nicht statt. Verwenden Sie deshalb Farbwerte in einer für Ihr Projekt passenden CSS-Schreibweise.

2. Wählen Sie den Verlaufstyp. Für einen linearen Verlauf verwenden Sie linear; für einen kreisförmigen radialen Verlauf verwenden Sie exakt radial. Wenn Sie keinen Typ angeben, wird linear verwendet.

3. Geben Sie bei einem linearen Verlauf bei Bedarf einen Winkel in Grad ein. Ohne Angabe wird ein Winkel von 45 Grad verwendet. Der eingegebene Winkel wird in eine ganze Zahl umgewandelt und auf den Bereich innerhalb eines 360-Grad-Umlaufs reduziert. Lässt sich die Eingabe nicht in eine Zahl umwandeln, fällt der Wert auf 45 Grad zurück.

4. Lassen Sie den CSS-Text erzeugen und übernehmen Sie ihn in den dafür vorgesehenen Bereich Ihres Stylesheets. Bei einem linearen Verlauf enthält der Text den Winkel in Grad und die beiden Farbwerte. Bei radial entsteht ein kreisförmiger radialer Verlauf mit den beiden angegebenen Farben.

5. Prüfen Sie vor der Verwendung den erzeugten Text. Ein anderer Typwert als linear oder exakt radial erzeugt keinen eigenen zusätzlichen Verlauf: In diesem Fall wird das lineare Format verwendet, während der eingegebene Typwert in den zurückgegebenen Daten erhalten bleibt.

Ergebnis verstehen

Das Ergebnis ist CSS-Text für einen Verlauf. Bei einem linearen Verlauf können Sie darin den normalisierten Winkel und die beiden Farbwerte erkennen. Bei einem radialen Verlauf steht die kreisförmige Form im Mittelpunkt; ein Winkel ist dafür nicht der bestimmende Bestandteil der radialen Darstellung.

Fehlt eine Eingabe, greifen die vorgesehenen Standardwerte: Die erste Farbe ist #ff6b6b, die zweite #4ecdc4, der Winkel 45 Grad und der Typ linear. Das Ergebnis hängt außerdem davon ab, was Sie tatsächlich als Farbtext eingeben. Da keine eigene Farbvalidierung erfolgt, kann der erzeugte CSS-Text auch dann erstellt werden, wenn ein Farbwert für CSS nicht passend formatiert ist. Prüfen Sie solche Werte daher in Ihrem Zielprojekt.

Beachten Sie außerdem, dass nur linear und exakt radial als unterschiedliche Verlaufstypen behandelt werden. Ein abweichender Wert bedeutet nicht automatisch eine dritte Verlaufsart, sondern führt zum linearen Format.

Praktisches Beispiel

Sie möchten für eine Kartenüberschrift einen diagonalen Verlauf aus Blau und Gelb vorbereiten.

Geben Sie als erste Farbe #3366ff, als zweite Farbe #ffcc00, als Typ linear und als Winkel 120 ein und lassen Sie den CSS-Text erzeugen.

Bei linear, #3366ff, #ffcc00 und 120 enthält der erzeugte CSS-Text einen linearen Verlauf mit 120deg sowie diesen beiden Farbwerten.

Einschränkungen

• Die Farbwerte werden in den CSS-Text übernommen, ohne dass eine separate Prüfung auf gültige CSS-Farbwerte erfolgt. Kontrollieren Sie die Eingaben deshalb selbst.

Häufige Fehler

• Ursache: Für einen radialen Verlauf wurde ein abweichender Typwert eingegeben, etwa radial-gradient statt radial. Korrektur: Verwenden Sie für die radiale Form exakt radial; andere Werte werden im linearen Format verarbeitet.

Häufige Fragen

Welcher Verlaufstyp wird standardmäßig verwendet?

Ja, sofern Sie keinen eigenen Typwert angeben: Der Standardtyp ist linear. Für einen radialen Verlauf müssen Sie exakt radial verwenden.

Was passiert, wenn ich keinen gültigen Winkel eingebe?

Ohne Winkel verwendet das Tool 45 Grad. Eine nicht numerisch umwandelbare Eingabe fällt ebenfalls auf 45 Grad zurück; numerische Werte werden auf eine ganze Zahl reduziert und modulo 360 behandelt.

Werden meine Farbwerte auf CSS-Gültigkeit geprüft?

Die Farbwerte werden ohne gesonderte Farbvalidierung in den CSS-Text eingesetzt. Prüfen Sie daher selbst, ob die verwendete Schreibweise in Ihrem CSS-Projekt gültig ist.