CSS-Verlauf mit Vorschau Gestalten
Gestalten Sie einen CSS-Verlauf durch Wahl von Farben, Winkel und Typ, sehen Sie ihn live und kopieren Sie den Code.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Lokal zusammengesetzt
Sicher für unangekündigte Marken
Kein Konto
Sichere Verbindung
So funktioniert es
- 1
Farben wählen
Legen Sie Anfangs- und Endfarbe fest und ergänzen Sie Stopps dazwischen, wenn der Übergang gelenkt werden muss.
- 2
Richtung oder Form einstellen
Wählen Sie einen Winkel für einen linearen Verlauf oder Form und Position für einen radialen.
- 3
CSS kopieren
Übernehmen Sie die erzeugte `background`-Deklaration direkt in Ihr Stylesheet.
Warum dieses Tool
Beim Bauen sehen
Ein Verlauf wird an seiner Mitte beurteilt, nicht an den Enden — die Live-Vorschau zeigt genau den Teil, der tatsächlich misslingt.
Kopierfertiges CSS
Die Ausgabe ist eine gültige, sauber formatierte `background`-Deklaration, ohne Nacharbeit vor dem Einfügen.
Linear und radial
Beide Arten mit Kontrolle über Winkel oder Form — das deckt nahezu jeden Verlauf ab, den eine Website braucht.
Mehrere Farbstopps
Setzen Sie Stopps, um den Weg zwischen den Farben zu lenken, statt hinzunehmen, was die Mitte ergibt.
Nichts wird hochgeladen
Die Deklaration entsteht in Ihrem Browser — kein Farbwert wird irgendwohin gesendet.
Kostenlos, ohne Konto
Keine Anmeldung, keine Begrenzung, kein Wasserzeichen.
Die trübe Mitte und warum sie entsteht
Die häufigste Enttäuschung bei Verläufen ist, dass zwei ansprechende Farben dazwischen ein stumpfes graubraunes Band erzeugen. Das ist kein gestalterischer, sondern ein rechnerischer Befund: Browser interpolieren Verläufe in sRGB und mischen die Kanäle Rot, Grün und Blau getrennt und geradlinig. Mischen Sie so ein sattes Blau mit einem satten Gelb, enthält die Mitte mittlere Anteile aller drei Kanäle — und genau das ist die Definition von Grau. Am stärksten zeigt sich der Effekt zwischen Farben, die auf dem Farbkreis weit auseinanderliegen — Blau nach Gelb, Rot nach Grün — und kaum zwischen Nachbarn. Ihn als Arithmetik statt als Geschmacksfrage zu erkennen, macht ihn behebbar.
Behebung durch einen Zwischenstopp
Das praktische Mittel besteht darin, dem Browser die Wegwahl nicht länger zu überlassen. Setzen Sie einen Farbstopp in die Mitte und stellen Sie ihn auf den Farbton, durch den der Übergang laufen soll — ein Verlauf von Blau nach Gelb, über ein Grün oder Türkis geführt, bleibt auf der ganzen Strecke kräftig, weil Sie der Interpolation den Weg vorgegeben haben, statt sie durch das neutrale Zentrum schneiden zu lassen. Diese Zwischenfarbe wählt man am leichtesten in HSL: einen Farbtonwinkel zwischen beiden Enden nehmen und die Sättigung hoch halten. Der Farbkonverter macht daraus den HEX-Wert, den die Deklaration erwartet. Ein gut gesetzter Stopp rettet die meisten ausgewaschen wirkenden Verläufe.
Linear und radial — wann was passt
Ein linearer Verlauf läuft entlang einer geraden Achse im von Ihnen gewählten Winkel — 180deg von oben nach unten, 90deg von links nach rechts und alles dazwischen. Er ist die richtige Wahl für einen Seitenhintergrund, ein Kopfband oder eine Buttonfüllung, weil das Auge ihn als Fläche und nicht als Objekt liest. Ein radialer Verlauf breitet sich von einem Punkt aus und wirkt wie eine Lichtquelle oder ein Schimmer. Radial funktioniert für einen Spot hinter einem zentralen Element und scheitert als ganzseitiger Hintergrund, wo er wie eine ungefragte Vignette aussieht. Im Zweifel lautet die Antwort fast immer linear.
Verläufe und Text vertragen sich schwer
Ein Verlauf hinter Text gehört zu den verlässlichsten Barrierefreiheitsfehlern im Web, aus einem strukturellen Grund: Die Kontrastanforderung gilt an jedem Punkt, den der Text überquert, und ein Verlauf hat definitionsgemäß an jedem Punkt einen anderen Hintergrund. Eine Überschrift, die gegen das helle Ende 4,5:1 erreicht, kann gegen das dunkle Ende unter 3:1 fallen, und die bestandene Messung am einen Ende sagt nichts über das andere. Prüfen Sie die Textfarbe gegen beide Enden mit der Kontrastprüfung; fällt eines durch, ist die Lösung eine deckende Fläche hinter dem Text und keine andere Textfarbe.
Zurückhaltung lässt Verläufe aktuell wirken
Verläufe, die zeitgemäß wirken, sind fast immer dezent: zwei Nuancen desselben Farbtons, wenige Helligkeitsstufen auseinander, auf eine große Fläche angewendet. Als überholt lesen sich kontraststarke, mehrfarbige Verläufe auf kleinen Elementen. Wenn Sie eine Palette haben, ist der sicherste Verlauf der zwischen zwei benachbarten Stufen derselben Farbskala — er schafft Tiefe, ohne sich anzukündigen. Eine Faustregel, die den Kontakt mit echten Interfaces übersteht: Würde jemand Ihre Seite als „die mit dem Verlauf“ beschreiben, tut der Verlauf zu viel.
Leistung und wo deklariert wird
Ein CSS-Verlauf wird vom Browser gezeichnet statt heruntergeladen: Er kostet keine Netzwerkanfrage und bleibt in jeder Größe scharf — ein echter Vorteil gegenüber einem Hintergrundbild und ein Grund, ihn für große ruhige Flächen zu bevorzugen. Zwei Hinweise gelten. Einen Verlauf zu animieren, indem man seine Farbstopps ändert, erzwingt in jedem Frame ein Neuzeichnen und ist teuer; animieren Sie stattdessen `opacity` oder `transform` auf einer Ebene, die den Verlauf trägt. Und auf einem sehr großen Element kostet ein Verlauf mit vielen Stopps mehr Zeichenaufwand als einer mit zwei — was auf leistungsschwächeren Telefonen zählt, wo die Zeichenzeit der Engpass ist.
Häufige Fehler, die Sie vermeiden sollten
- Einen Verlauf nach seinen beiden Endfarben beurteilen. Die Enden sehen fast immer gut aus; das Problem liegt in der Mitte, wo die sRGB-Interpolation die Sättigung auszehrt. Schauen Sie auf die Vorschau, nicht auf die Farbfelder.
- Eine graue Mitte zwischen weit entfernten Farbtönen hinnehmen. Setzen Sie einen Zwischenstopp auf den Farbton, durch den der Übergang laufen soll — ein einziger Stopp rettet die meisten ausgewaschenen Verläufe.
- Text über einen Verlauf legen und nur ein Ende prüfen. Die Kontrastanforderung gilt an jedem überquerten Punkt; prüfen Sie das helle und das dunkle Ende und ergänzen Sie eine deckende Fläche, wenn eines durchfällt.
- Einen radialen Verlauf als ganzseitigen Hintergrund verwenden. Er liest sich als Vignette statt als Fläche; radial gehört hinter ein zentrales Element, linear in den Hintergrund.
- Die Farbstopps animieren. Das zeichnet den Verlauf in jedem Frame neu — animieren Sie stattdessen Deckkraft oder Transformation auf einer Ebene, die der Browser günstig zusammensetzen kann.
Im Vergleich
| KeroTools | Browser-Entwicklerwerkzeuge | Designsoftware | |
|---|---|---|---|
| Live-Vorschau beim Bearbeiten | Ja | Ja, auf einer echten Seite | Ja |
| Kopierfertige CSS-Ausgabe | Ja | Ja | Oft nur näherungsweise |
| Nutzbar vor dem Bauen | Ja | Nein — braucht eine gerenderte Seite | Ja |
| Werte gehen an einen Server | Nie | Nein | Nein |
| Konto oder Lizenz | Weder noch | Weder noch | Lizenz erforderlich |
| Kosten | Kostenlos | Kostenlos | Kostenpflichtig |
Funktionen
Lineare Verläufe
Beliebiger Winkel in Grad oder die Schlüsselwortrichtungen, die CSS akzeptiert.
Radiale Verläufe
Kreisförmig oder elliptisch, mit Kontrolle darüber, wo der Mittelpunkt sitzt.
Mehrere Farbstopps
Fügen Sie Zwischenfarben ein und positionieren Sie sie präzise entlang der Achse.
Live-Vorschau
Der Verlauf wird beim Bearbeiten gezeichnet, sodass die trübe Mitte vor der Veröffentlichung sichtbar wird.
Gültige CSS-Ausgabe
Eine vollständige `background`-Deklaration, kein Fragment, das Sie zusammensetzen müssten.
HEX-Farbeingabe
Fügen Sie Codes direkt aus einem Markendokument oder einer Palette ein.
Keine Installation
Nichts herunterzuladen oder zu installieren — es läuft auf der Webseite.
Arabisch- und RTL-tauglich
Vollständige Oberfläche in acht Sprachen, einschließlich Arabisch von rechts nach links.
Standardmäßig sicher
Über HTTPS ausgeliefert, ohne Datei-Tracking und ohne Upload an Dritte.
Wer es nutzt
Frontend-Entwickelnde
Eine gültige Verlaufsdeklaration bekommen, ohne Winkel und Stoppositionen von Hand zu schreiben.
Gestaltende
Prüfen, wie ein Zweifarbübergang tatsächlich gezeichnet wird, bevor er in einen Entwurf gelangt.
Alle, die ein Template anpassen
Aus zwei bereits vorhandenen Markenfarben einen Kopf- oder Buttonhintergrund erzeugen.
Lernende
Sehen, was ein geänderter Winkel oder ein zusätzlicher Stopp bewirkt, statt die Syntax zu erraten.
Häufig Gestellte Fragen
Nein. Alles läuft lokal im Browser — nichts wird hochgeladen, gespeichert oder geteilt.
Ja — komplett kostenlos, ohne Konto und ohne Limits.