CSS Gradient Generator: Farbverlauf erstellen

Farbverlauf nach Augenmaß, CSS-Code zum Einfügen

Dieser CSS Gradient Generator zeigt Ihren Farbverlauf in einer großen Vorschau und schreibt den Code laufend mit. Sie wählen die Art („Linear“, „Radial“ oder „Konisch“), den Winkel und 2 bis 8 Farbstopps, jeder mit eigener Position und Deckkraft. Alles wird im Browser berechnet, passend für den Kopfbereich einer Website, einen Button oder die Seite eines Vereins, ganz ohne Grafikprogramm.

So erstellen Sie einen Farbverlauf

1. Wählen Sie die Art. Beim linearen Verlauf stellen Sie den „Winkel“ mit dem Regler ein oder klicken auf einen Pfeil unter „Richtung“. Beim radialen Verlauf wählen Sie die „Form“ (Kreis oder Ellipse) und die Lage des Mittelpunkts.
2. Unter „Farbstopps“ fügt ein Klick auf die Leiste einen Stopp hinzu; die Griffe lassen sich mit Maus oder Finger ziehen. Jede Zeile regelt die Farbe (Farbwähler oder HEX-Code), die „Position %“ und die „Deckkraft %“. Die Schaltfläche × entfernt den Stopp, „Reihenfolge umkehren“ dreht den Verlauf um.
3. Unter „CSS-Code“ wählen Sie das Format: background, background-image, „Utility-Klasse“ oder „SVG“ (nur linear). Dann klicken Sie auf „Code kopieren“.
4. „PNG herunterladen“ speichert ein Bild mit standardmäßig 1920 × 1080 px, höchstens 8000 px je Seite.

„Zufälliger Verlauf“ (oder die Leertaste) zieht 2 oder 3 Farben mit benachbarten oder gegenüberliegenden Farbtönen, und die Galerie enthält 16 Vorlagen. „Diesen Verlauf speichern“ behält bis zu 12 Verläufe auf Ihrem Gerät; danach müssen Sie erst einen löschen. Die Adresse der Seite folgt jeder Einstellung: Kopieren Sie sie, um den Verlauf weiterzugeben.

Verlauf in CSS: die Schreibweise

Klicken Sie in der Galerie auf „Unterholz“, und das Werkzeug schreibt:

background: #14532d;

background: linear-gradient(45deg, #14532d 0%, #84cc5c 100%);

Die erste Zeile ist eine einfarbige Rückfallfarbe. Die zweite zeichnet den Verlauf: erst der Winkel, dann die Stopps, jeweils aus Farbe und Position. Bei den Winkeln zeigt 0deg nach oben, 90deg nach rechts und 180deg nach unten; 45deg läuft also von unten links nach oben rechts. Schlüsselwörter sagen dasselbe: to right entspricht 90deg, to bottom entspricht 180deg.

• radial-gradient(circle at 50% 50%, #fff3b0 0%, #7a1f3d 100%) geht von einem Mittelpunkt aus und breitet sich als Kreis bis zur entferntesten Ecke aus.
• conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%) dreht sich um den Mittelpunkt und beginnt oben.
• Eine Deckkraft unter 100 macht aus der Farbe rgba: #14532d mit 80 % wird zu rgba(20, 83, 45, 0.8).

Harte Streifen. Zwei Stopps an derselben Position heben den Übergang auf. linear-gradient(90deg, #2b1b5a 0%, #2b1b5a 50%, #ffd3a5 50%, #ffd3a5 100%) ergibt zwei glatte Hälften mit scharfer Kante.

Gestaltungstipps

• Benachbarte Farbtöne wirken weich. Zwei Farben, die im Farbkreis nah beieinanderliegen, etwa Dunkelgrün und Hellgrün, gehen sauber ineinander über.
• Vorsicht vor dem Grau zwischen Komplementärfarben. Zwischen Rot #ff0000 und Cyan #00ffff landet die Mitte des Verlaufs bei einem mittleren Grau nahe #808080. Setzen Sie einen farbigen Stopp dazwischen: Die Vorlage „Koralle zu Türkis“ führt bei 50 % über ein Sandgelb.
• Lesbarkeit prüfen. Das Werkzeug nennt den WCAG-Kontrast von weißem und schwarzem Text auf den beiden äußeren Farben. Bei „Unterholz“ erreicht weißer Text auf dem Dunkelgrün 9,11:1 („AA erfüllt“, die Schwelle liegt bei 4,5:1), auf dem Hellgrün aber nur 1,94:1. Schwarzer Text kommt umgekehrt auf 2,30:1 und 10,77:1.
• CSS statt Bilddatei. Eine Zeile Code wiegt ein paar Dutzend Byte, passt sich jeder Bildschirmgröße an und bleibt scharf. Das PNG eignet sich für Präsentationen, Beiträge in sozialen Netzwerken oder Hintergrundbilder.

Alle drei Funktionen laufen in allen aktuellen Browsern ohne Präfix.

Häufige Fragen

Was ist der Unterschied zwischen background und background-image?

background ist eine Kurzschreibweise und setzt die übrigen Hintergrundwerte (Position, Wiederholung, Größe) zurück. background-image ändert nur das Bild und passt besser, wenn Ihr Stylesheet den Rest schon festlegt. In diesem Format schreibt das Werkzeug die Zeile background-color nur, wenn alle Stopps deckend sind, weil sie sonst durch einen transparenten Verlauf durchscheinen würde.

Wie lege ich einen Verlauf auf einen Text?

Setzen Sie den Verlauf als Hintergrund des Textes und ergänzen Sie background-clip: text sowie color: transparent. Die Vorschau „Text mit Verlauf“ zeigt das Ergebnis mit Ihren Farben.

Wie mache ich einen Verlauf zu transparent?

Geben Sie zwei Stopps dieselbe Farbe und stellen Sie die Deckkraft des einen auf 0. Die Vorlage „Dunkler Schleier“ geht so von 0 auf 85 %: Über einem Foto bleibt eine weiße Überschrift lesbar.

Werden meine gespeicherten Verläufe irgendwohin gesendet?

Nein. Sie bleiben im Speicher Ihres Browsers auf diesem Gerät. Um einen Verlauf auf einem anderen Gerät zu nutzen, kopieren Sie die Adresse der Seite und öffnen sie dort.