CSS-Farbverlauf-Generator

So funktioniert es

Tragen Sie Ihre Farben in das linke Feld ein: eine Farbe pro Zeile, die Zeilenreihenfolge ist die Reihenfolge im Verlauf. HEX-, RGB- und HSL-Schreibweisen werden erkannt. Soll eine Farbe an einer bestimmten Stelle sitzen, hängen Sie eine Prozentzahl an die Zeile: "#2F6FED 30" setzt die Farbe fest auf die 30-Prozent-Marke, Farben ohne Position verteilen sich gleichmäßig über den Rest. Wählen Sie dann den Typ — beim linearen Verlauf bestimmt der Winkelregler die Richtung (90 Grad läuft von links nach rechts, 180 von oben nach unten), beim konischen Verlauf ist er der Startwinkel, der radiale Verlauf öffnet sich immer von der Mitte nach außen. Die Vorschau folgt jedem Tastendruck. Im erzeugten CSS steht die erste Farbe zusätzlich als einfache background-color, damit auch ein Client ohne Verlaufsdarstellung nie eine leere Fläche zeigt. Kopieren Sie den Code oder speichern Sie denselben Verlauf über Herunterladen als PNG mit 1920×1080 Pixeln.

Dieses Werkzeug ist auch als css farbverlauf generator, css gradient erstellen, linear gradient css, farbverlauf hintergrund css, conic gradient css, farbverlauf als png bekannt.

Was ist linear-gradient?

linear-gradient ist die CSS-Funktion, die zwei oder mehr Farben entlang einer geraden Linie ineinander überführt. Der erste Parameter ist der Richtungswinkel: 0 Grad läuft von unten nach oben, 90 Grad von links nach rechts, 180 von oben nach unten. Danach folgen die Farbstopps, jeder mit Farbe und optionaler Position. Der Browser berechnet die Mischung für jedes Pixel zwischen zwei Stopps — die Ausgabe ist keine Bilddatei, sondern eine Zeichenanweisung, die in jeder Auflösung scharf bleibt und deren Farben sich mit einer Zeile ändern lassen.

Was ist Farbstopp (color stop)?

Ein Farbstopp ist das Paar, das einem Verlauf sagt, an welcher Stelle eine Farbe in voller Stärke steht: Farbwert plus Prozentposition. "#2F6FED 30%" bedeutet, dass die reine Farbe genau auf der 30-Prozent-Marke sitzt; jedes Pixel zwischen zwei Stopps ist eine Mischung aus beiden. Bekommen zwei Stopps dieselbe Position, entsteht statt eines Übergangs eine harte Kante — in diesem Werkzeug verteilen sich Stopps ohne Positionsangabe gleichmäßig, die von Ihnen gesetzten bleiben genau dort, wo Sie sie hingeschrieben haben.

Was unterscheidet linear-gradient von radial-gradient?

Beide mischen Farben nach denselben Regeln; der Unterschied liegt in der Geometrie des Übergangs. linear-gradient gießt die Farben entlang einer geraden Linie: Sie wählen den Winkel, und quer zu dieser Linie ist die Farbe überall gleich — das Werkzeug für Kante-zu-Kante-Hintergründe, Leisten und Schaltflächenfüllungen. radial-gradient öffnet sich ringförmig von einem Mittelpunkt nach außen: der erste Stopp liegt in der Mitte, der letzte auf dem äußersten Ring, eine Richtung gibt es nicht — deshalb wirkt der Winkelregler dort nicht. Spotlicht, Vignette und Fokuseffekte — alles, was von innen nach außen gelesen wird — entsteht mit der radialen Form.

Die Fallen: Nahtlinie und Streifenbildung

Ein konischer Verlauf dreht eine volle Runde und kommt an seinem Anfang wieder an. Ist die letzte Farbe nicht die erste, entsteht dort, wo sich der Kreis schließt, eine harte Nahtlinie — das liegt in der Natur der Form, es ist kein Fehler. Für einen geschlossenen Ring wiederholen Sie die erste Farbe in der letzten Zeile; die Positionen verteilt das Werkzeug entsprechend.

Die zweite Falle ist die Streifenbildung: Liegen zwei sehr ähnliche Töne über einer großen Fläche, reichen die 256 Stufen pro Farbkanal des Bildschirms für den weichen Übergang nicht aus, und sichtbare Stufen entstehen. Töne weiter auseinanderlegen, die Übergangsfläche verkleinern oder einen Zwischenstopp einfügen — das bricht die Streifen auf.

Welcher Verlaufstyp für welche Aufgabe?

Die Typwahl ist ebenso eine Funktionsfrage wie eine Geschmacksfrage; alle drei haben feste Einsatzgebiete.

• Linear → Hintergründe von Schaltflächen und Karten, Kopfleisten, Seitenhintergründe
• Radial → Spotlicht, Vignette, Blickfang in der Mitte
• Konisch → Kreisdiagramme, Farbkreise, Ladering-Anzeigen
• PNG-Ausgabe → wo CSS nicht hinkommt: Folienhintergrund, E-Mail-Vorlage, Hintergrundbild

Häufige Fragen

Wie lege ich fest, wo eine Farbe im Verlauf sitzt?

Hängen Sie eine Zahl von 0 bis 100 an die Zeile: "#DB2777 75" setzt die Farbe auf die 75-Prozent-Marke. Das Prozentzeichen ist optional; Farben ohne Position verteilen sich gleichmäßig über den restlichen Bereich.

Was speichert die Schaltfläche Herunterladen?

Den Verlauf aus der Vorschau als PNG mit 1920×1080 Pixeln. Für den CSS-Code selbst nehmen Sie die Kopier-Schaltfläche; der Code landet unverändert in der Zwischenablage.

Wie viele Farben sind möglich?

2 bis 12. Zwei Farben genügen für die meisten Zwecke; bei mehr Stopps steuern Sie die Reihenfolge über die Zeilen und die Positionen über die Prozentzahlen am Zeilenende.

Läuft das erzeugte CSS auch in älteren Browsern?

linear-gradient und radial-gradient funktionieren seit vielen Jahren in jedem aktuellen Browser. conic-gradient ist jünger (Versionen ab etwa 2020); bei einem sehr alten Client greift die einfache background-color-Zeile im Code.