Question 1

Ist dieser CSS-Farbverlauf-Generator kostenlos?

Accepted Answer

Ja, komplett — jede Funktion auf dieser Seite ist kostenlos, inklusive radialer und konischer Verläufe, unbegrenzter Farbstopps, dem Weichzeichnungs-Toggle für die Farbmitte, Bild-Farbauswahl und jedem Ausgabemodus (Tailwind, Text, Rahmen, Animation). Keine Anmeldung, kein Wasserzeichen und nichts hinter einem „Pro“-Tarif oder einer Werbeanzeige versteckt, anders als bei manchen für dieses Tool getesteten Wettbewerbern.

Question 2

Muss ich etwas herunterladen oder installieren?

Accepted Answer

Nein. Alles läuft direkt in diesem Browser-Tab — baue deinen Verlauf, entnimm Farben aus einem Bild oder nutze „Vom Bildschirm auswählen“, du installierst nichts und es bleibt danach auch nichts auf deinem Gerät zurück.

Question 3

Lädt dieses Tool meine Farben oder Bilder irgendwohin hoch?

Accepted Answer

Nein. Jeder Farbstopp, jede entnommene Farbe und jedes hochgeladene Bild wird komplett in deinem Browser verarbeitet. Dieses Tool hat gar keinen Server im Hintergrund, an den überhaupt etwas geschickt werden könnte.

Question 4

Kann ich einen Verlauf mit mehr als 2 Farben erstellen?

Accepted Answer

Ja — füge über „Stopp hinzufügen“ oder per Klick auf die Verlaufsleiste so viele Farbstopps hinzu, wie du möchtest. Hier gibt es keine feste Grenze bei zwei Farben, anders als bei einem getesteten Wettbewerber, dessen „Multi-Stopp“-Versprechen genau bei zwei Farben endet.

Question 5

Kann ich einen transparenten oder halbtransparenten Verlauf erstellen?

Accepted Answer

Ja. Jeder Farbstopp hat eine eigene Deckkraft-Einstellung, von vollständig deckend bis vollständig transparent, sodass sich ein Verlauf in den Hintergrund dahinter einblenden oder mit mehreren Verlaufsebenen kombinieren lässt.

Question 6

Was ist der Unterschied zwischen einem linearen, radialen und konischen Verlauf?

Accepted Answer

Ein linearer Verlauf bewegt Farbe entlang einer geraden Linie im eingestellten Winkel. Ein radialer Verlauf breitet Farbe kreisförmig von einem Mittelpunkt nach außen aus. Ein konischer Verlauf schwenkt Farbe wie ein Uhrzeiger um einen Mittelpunkt herum, was ihn für Tortendiagramm- und Farbrad-Effekte nützlich macht. Wechsle oben über die Typauswahl zwischen allen dreien — dieses Tool gehört zu den wenigen, die alle drei unterstützen, statt bei Linear und Radial aufzuhören.

Question 7

Kann ich einen sich wiederholenden Verlauf erstellen?

Accepted Answer

Ja — aktiviere „Wiederholend“ für einen linearen oder radialen Verlauf (konische Verläufe wiederholen sich durch ihre Form von Natur aus, deshalb gibt es den Schalter dort nicht), und dein Stopp-Muster kachelt sich fortlaufend, statt sich einmal über das Element zu strecken. Setze deine Stopps deutlich unter 100 %, um eine gut sichtbare, enge Wiederholung zu bekommen.

Question 8

Warum sieht mein Verlauf in der Mitte grau oder matschig aus?

Accepted Answer

Das ist eine echte, bekannte Eigenheit der üblichen Verlauf-Berechnung: Mischt man zwei sehr unterschiedliche Farbtöne (wie Rot und Grün) in reinem RGB oder HSL, entsteht in der Mitte oft eine trübe graue oder braune „tote Zone“. Aktiviere „Matschige Mittelfarben vermeiden“, und dieses Tool interpoliert stattdessen über OKLCH, einen wahrnehmungsgleichmäßigen Farbraum — dieselbe Lösung, die professionelle Design-Tools nutzen, hier auf einen einzigen Schalter vereinfacht.

Question 9

Kann ich eine Verlaufsfarbe direkt von meinem Bildschirm auswählen?

Accepted Answer

Ja — öffne das Farb-Popover eines Stopps und klick auf „Vom Bildschirm auswählen“. Dein Cursor verwandelt sich in eine Pipette, mit der du dich über deinen gesamten Bildschirm bewegen kannst, nicht nur über diesen Browser-Tab, über die native EyeDropper-API des Browsers.

Question 10

Warum kann ich die Pipette nicht in Firefox oder Safari nutzen?

Accepted Answer

Das ist eine echte Einschränkung dieser Browser, keine bewusste Weglassung hier: Die EyeDropper-API ist aktuell nur in Chrome, Edge und anderen Chromium-basierten Browsern implementiert. In Firefox oder Safari wird der Button ausgeblendet, statt als toter Button angezeigt zu werden — entnimm die Farbe stattdessen aus einem hochgeladenen Bild oder gib sie manuell ein.

Question 11

Kann ich einen Verlauf aus einem Bild erstellen?

Accepted Answer

Ja. Lass ein Bild unten fallen, klick zum Durchsuchen, oder füge eines direkt aus der Zwischenablage ein — dieses Tool extrahiert automatisch die dominanten Farben und macht daraus Farbstopps, komplett in deinem Browser, bereit zur Feinabstimmung.

Question 12

Kann ich diesen Verlauf als Tailwind-CSS-Klasse verwenden?

Accepted Answer

Ja — wechsle im Code-Bereich zum Tab „Tailwind CSS“ und kopiere die fertige Arbitrary-Value-Klasse, z. B. bg-[linear-gradient(...)]. Sie funktioniert für jeden Verlauf, den dieses Tool bauen kann, auch für konische und mehrstufige Verläufe, die sich mit Tailwinds eigenen from-*/via-*/to-*-Utilities nicht abbilden lassen.

Question 13

Wie erstelle ich Verlaufstext in CSS?

Accepted Answer

Wechsle im Code-Bereich zum Tab „Verlaufstext“ und kopiere den Schnipsel. Er schneidet den Verlauf mit background-clip: text auf die Form deines Texts zu und macht den Text selbst transparent, sodass der Verlauf durchscheint — füge ihn auf eine beliebige Überschrift oder ein Textelement ein.

Question 14

Wie erstelle ich einen Verlaufsrahmen in CSS?

Accepted Answer

Wechsle im Code-Bereich zum Tab „Verlaufsrahmen“. Er nutzt einen Zwei-Ebenen-Hintergrund-Trick (eine deckende innere Ebene plus deinen Verlauf als äußere Ebene), da CSS-Rahmen keinen Verlauf direkt annehmen können, und unterstützt dabei auch abgerundete Ecken, anders als der einfachere border-image-Ansatz.

Question 15

Kann ich einen CSS-Verlauf animieren?

Accepted Answer

Ja — wechsle im Code-Bereich zum Tab „Animiert“ für fertige Eigenschaften plus eine @keyframes-Animation, die den Verlauf sanft hin und her verschiebt. Füge die Deklarationen auf den Selektor deines Elements und den Keyframes-Block irgendwo sonst in dein Stylesheet ein.

Question 16

Funktioniert dieser Verlauf in jedem Browser?

Accepted Answer

Der grundlegende Verlauf — linear, radial, konisch, wiederholend, mehrstufig, mit Transparenz — funktioniert in jedem modernen Browser. Die einzige Ausnahme ist die OKLCH-Interpolation des Schalters „Matschige Mittelfarben vermeiden“, die einen Browser ab Baujahr 2023 braucht (heute jeder aktuelle Browser); schaltest du ihn aus, wird der Verlauf trotzdem überall korrekt dargestellt, nur in reinem RGB interpoliert.

Farbverlauf Generator

Farbstopps

CSS-Code

Vorgefertigte Verläufe

Verlauf aus einem Bild erstellen

Häufig gestellte Fragen

Ähnliche Tools