CSS-Gradienten mit linearem oder radialem Verlauf erzeugen

Einsatz und Grundprinzip des Generators

Ein CSS-Gradienten-Generator nimmt kurze Texteingaben für Verlaufstyp, Richtung und Farben entgegen und erstellt daraus CSS-Code. Damit können Sie eine Ausgangsbasis für Hintergründe, Karten, Schaltflächen oder andere Flächen vorbereiten, ohne die grundlegende Schreibweise des Verlaufs von Hand zusammenzusetzen. Das geprüfte Verhalten unterscheidet zwischen einem linearen Verlauf und einem radialartigen Ergebnis.

Die Eingaben sind optional. Wenn Sie keine eigenen Werte eintragen, verwendet das Tool linear als Verlaufstyp, to right als Richtung sowie #ff7e5f und #feb47b als Farben. Diese Voreinstellung eignet sich, um zunächst die Form des erzeugten Ergebnisses zu sehen und danach einzelne Angaben gezielt zu ersetzen.

Für die Auswahl des Verlaufstyps ist die Schreibweise relevant. Der lineare Zweig wird nur durch den Text linear ausgelöst. Ein anderer Text für diesen Typ führt stattdessen zu einem radialen Verlauf mit Kreisform. Die Bezeichnung, die Sie für einen nichtlinearen Typ eingeben, erweitert das Verhalten daher nicht um weitere geprüfte Verlaufmodi.

Eigene Verlaufseinstellungen in sechs Schritten

1. Öffnen Sie den Generator und sehen Sie sich die drei vorgesehenen Texteingaben für Verlaufstyp, Richtung und Farben an. Sie können die Felder zunächst leer lassen oder sofort eigene Angaben eintragen.

2. Entscheiden Sie, ob das Ergebnis linear oder radialartig sein soll. Für den linearen Verlauf tragen Sie als Typ genau linear ein; Großschreibung oder eine abweichende Bezeichnung aktiviert diesen Zweig nicht. Für das radialartige Ergebnis geben Sie beim Typ einen anderen Text ein.

3. Wenn Sie linear verwenden, schreiben Sie die gewünschte Richtung in das Richtungsfeld, zum Beispiel to bottom right. Diese Angabe wird in den erzeugten linearen CSS-Code übernommen. Bleibt das Feld ohne eigene Eingabe, gilt to right als voreingestellte Richtung.

4. Tragen Sie die Farben als eine durch Kommas getrennte Folge ein. Eine mögliche Eingabe lautet #112233, #fefefe, #ffcc00. Das Tool teilt den Text an Kommas, entfernt die umgebenden Leerzeichen jedes entstandenen Eintrags und verbindet die Einträge anschließend mit Komma und Leerzeichen.

5. Starten Sie die Erzeugung und lesen Sie den ausgegebenen CSS-Code. Vergleichen Sie Typ, Richtung und Farbreihenfolge mit Ihren Eingaben, bevor Sie den Inhalt in ein Stylesheet oder eine andere Projektdatei übernehmen. Bei einer radialartigen Auswahl sollte die Ausgabe die Kreisform erkennen lassen.

6. Ändern Sie bei Bedarf nur eine Eingabe und erzeugen Sie das Ergebnis erneut. So können Sie beispielsweise zuerst die Richtung anpassen, anschließend eine Farbe austauschen und danach kontrollieren, ob die gewünschte Reihenfolge im Ergebnis erhalten bleibt.

Leere Felder können Sie auch bewusst nutzen, wenn die Standardwerte für einen ersten Entwurf ausreichen. Sobald Sie eine bestimmte Gestaltung benötigen, ersetzen Sie den jeweiligen Standardtext durch Ihre eigene Angabe und beachten die besondere Schreibweise beim Verlaufstyp.

Ausgabe prüfen und Grenzen richtig verstehen

Im Ergebnis erhalten Sie CSS-Code für einen linearen oder radialartigen Verlauf. Steht beim Typ genau linear, sollte die von Ihnen eingetragene Richtung im linearen Verlauf erscheinen. Bei jedem anderen Typtext beschreibt die geprüfte Verarbeitung ein radiales Ergebnis mit Kreisform, nicht einen zusätzlichen Verlaufstyp.

Die Farbangabe wird als Text aufbereitet. Das bedeutet, dass Kommas als Trennstellen dienen und Leerzeichen am Anfang oder Ende der einzelnen Einträge entfernt werden. Die Verarbeitung bestätigt dagegen nicht, ob ein Eintrag ein gültiger Farbwert, ein verwendeter Farbname oder eine passende Richtung ist. Prüfen Sie diese Angaben deshalb selbst im ausgegebenen CSS und im Zusammenhang mit Ihrem Projekt.

Die Reihenfolge der Farben bleibt nach der Aufbereitung erhalten. Eine Eingabe wie #112233, #fefefe wird daher als dieselbe Abfolge mit einheitlicher Komma-Leerzeichen-Schreibweise weitergegeben. Wenn das Ergebnis nicht die beabsichtigte Gestaltung beschreibt, untersuchen Sie zunächst Verlaufstyp, Richtung, Trennzeichen und Reihenfolge der Eingaben.

Aus dem geprüften Verhalten folgt keine Unterstützung weiterer Verlaufmodi. Verwenden Sie für eine lineare Ausgabe den exakt passenden Typtext und rechnen Sie bei anderen Typtexten mit dem radialartigen Verhalten. Der Generator liefert eine Grundlage, deren konkrete Eignung Sie vor dem Einsatz in Ihrer Oberfläche beurteilen sollten.

Praktisches Beispiel

Sie bereiten für den Hintergrund einer Kartenkomponente einen schräg verlaufenden Übergang von Dunkelblau zu Weiß vor.

Wählen Sie linear, tragen Sie to bottom right und anschließend #112233, #fefefe ein, und starten Sie die Erzeugung.

Der erzeugte CSS-Code enthält einen linearen Verlauf mit der Richtungsangabe to bottom right sowie die Farbliste #112233, #fefefe in dieser Reihenfolge.

Einschränkungen

• Die Verarbeitung bereinigt die Texttrennung der Farbliste, weist aber keine Prüfung von Farb- oder Richtungssyntax aus; außerdem sind nur der lineare Zweig und das radialartige Verhalten für andere Typtexte belegt.

Häufige Fehler

• Ein Typtext wie Linear aktiviert den linearen Zweig nicht, weil nur linear genau übereinstimmt; ersetzen Sie die Eingabe durch linear, wenn die Richtung in einem linearen Verlauf verwendet werden soll.

Häufige Fragen

Wie erzeuge ich einen linearen CSS-Verlauf?

Verwenden Sie im Feld für den Verlaufstyp genau linear und tragen Sie die gewünschte Richtung separat ein. Diese Richtung wird anschließend in den erzeugten linearen CSS-Code übernommen.

Welche Standardwerte nutzt der Generator?

Wenn Sie die Eingaben leer lassen, setzt der Generator den Typ auf linear, die Richtung auf to right und die Farben auf #ff7e5f sowie #feb47b.

Was passiert bei einem radialen Verlauf und mehreren Farben?

Bei einem Typtext, der nicht genau linear lautet, entsteht ein radialer Verlauf mit Kreisform. Mehrere Farben werden an Kommas getrennt, von umgebenden Leerzeichen bereinigt und danach mit Komma und Leerzeichen verbunden.