Farbverlauf-Generator
Erstelle CSS-Verläufe - linear, radial und konisch - visuell, sofort und kostenlos. Füge bis zu 10 Farbstopps hinzu, lege exakte Positionen fest, wähle Richtung und Winkel und erhalte produktionsfertigen CSS-Code mit einem Klick. Sechs Vorlagen sind für den Start enthalten. Vollständig privat, ohne Anmeldung.
Presets
Gradient Type
Direction
Color Stops (2)
Click the colour swatch to open the colour picker. Drag the slider to adjust position.
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
Warum unseren Farbverlauf-Generator verwenden?
- Live-Vorschau & sofortiges CSS: Der Farbverlauf-Generator aktualisiert die Live-Vorschau und die CSS-Ausgabe bei jeder Änderung - ohne Knopfdruck. Sieh deinen Verlauf exakt so, wie er im Browser erscheint, und kopiere das CSS mit einem Klick.
- Drei Verlaufstypen & volle Kontrolle: Erstelle lineare, radiale und konische Verläufe mit voller Kontrolle über Richtung, Winkel, Form, Größe und Mittelposition. Füge bis zu 10 Farbstopps hinzu, lege exakte Positionen fest und aktiviere den Wiederholmodus für gekachelte Muster.
- 100 % privat - kein Upload: Die gesamte Verlaufsgenerierung findet lokal in deinem Browser statt. Deine Farbauswahl verlässt dein Gerät nie und wird nie an einen Server gesendet - sicher für Kundenprojekte und proprietäre Designsysteme.
- Kostenlos & ohne Limits: Erzeuge unbegrenzt viele Verläufe ohne Anmeldung, ohne Abo und ohne Nutzungsobergrenzen. Der Farbverlauf-Generator ist für immer völlig kostenlos und ohne Werbung, die die Oberfläche blockiert.
Typische Anwendungsfälle für den Farbverlauf-Generator
- Website-Hintergründe & Hero-Bereiche: Webdesigner nutzen den Farbverlauf-Generator, um auffällige Hero-Hintergründe, Seitenverläufe und Abschnittstrenner zu erstellen. Kopiere das CSS mit einem Klick direkt in dein Stylesheet.
- CSS- & Tailwind-Entwicklung: Frontend-Entwickler nutzen den Farbverlauf-Generator, um Verlaufs-CSS zu erstellen und zu testen, bevor sie es in ihre Codebasis übernehmen. Das Ergebnis ist produktionsfertiges CSS, das in allen modernen Browsern funktioniert.
- Design-System-Tokens: Design-System-Teams nutzen den Farbverlauf-Generator, um Verlaufs-Tokens für Hintergründe, Karten und UI-Komponenten zu definieren. Der visuelle Builder macht es einfach, Verläufe an Markenfarben auszurichten.
- Social-Media- & Marketing-Grafiken: Marketer und Content-Creator nutzen den Farbverlauf-Generator, um Verlaufshintergründe für Social-Media-Posts, Banner und E-Mail-Header zu erstellen. Die Vorlagenbibliothek bietet sofortige Startpunkte.
- Buttons & Karten gestalten: UI-Entwickler nutzen den Farbverlauf-Generator, um Verlaufsfüllungen für Buttons, Karten, Badges und Fortschrittsbalken zu erstellen. Radiale und konische Verläufe verleihen UI-Komponenten Tiefe und visuelles Interesse.
- Landingpage- & CTA-Design: Conversion-Optimierer nutzen den Farbverlauf-Generator, um kontrastreiche CTA- und Abschnittshintergründe mit Verläufen zu erstellen, die Aufmerksamkeit erregen und Nutzer durch die Seite führen.
Was ist ein CSS-Verlauf?
Ein CSS-Verlauf ist ein weicher Übergang zwischen zwei oder mehr Farben, der vollständig in CSS definiert wird - ohne Bilddatei. Verläufe werden mit der Eigenschaft background oder background-image und Verlaufsfunktionen erstellt. Unser Farbverlauf-Generator baut die CSS-Verlaufszeichenfolge visuell auf und gibt produktionsfertiges CSS aus, das in allen modernen Browsern ohne Herstellerpräfixe funktioniert.
So funktioniert unser Farbverlauf-Generator
- Verlaufstyp wählen: Wähle Linear (geradliniger Übergang), Radial (kreis- oder ellipsenförmig von einem Mittelpunkt) oder Konisch (rotierend um einen Mittelpunkt). Nutze eine Vorlage für einen sofortigen Start.
- Farbstopps und Optionen konfigurieren: Füge bis zu 10 Farbstopps über den Farbwähler oder die Hex-Eingabe hinzu. Ziehe den Positionsregler, um jeden Stopp exakt zu platzieren. Lege Richtung, Winkel, Form, Größe und Mittelposition für deinen Verlaufstyp fest. Alle Änderungen aktualisieren die Live-Vorschau sofort.
- CSS kopieren: Klicke auf „CSS kopieren“, um die produktionsfertige background:-Deklaration in die Zwischenablage zu kopieren. Füge sie direkt in dein Stylesheet ein.
Die drei CSS-Verlaufstypen
- Linearer Verlauf: Blendet Farben entlang einer geraden Linie über. Steuere die Richtung mit vordefinierten Schlüsselwörtern (to right, to bottom usw.) oder einem eigenen Winkel in Grad. Verwende repeating-linear-gradient für Streifenmuster.
- Radialer Verlauf: Blendet Farben von einem Mittelpunkt nach außen in kreis- oder ellipsenförmiger Ausdehnung über. Steuere Form (circle oder ellipse), Größe (farthest-corner, closest-side usw.) und Mittelposition.
- Konischer Verlauf: Blendet Farben rotierend um einen Mittelpunkt über - wie ein Farbrad oder Kreisdiagramm. Steuere Startwinkel und Mittelposition. Ideal für Kreisdiagramme, Farbkreise und kantige Designs.
Positionen der Farbstopps
Jeder Farbstopp hat eine Position (0 %-100 %), die bestimmt, wo diese Farbe im Verlauf erscheint. Haben zwei Stopps dieselbe Position, erzeugt der Verlauf eine harte Kante statt eines weichen Übergangs - nützlich für Streifeneffekte. Der Farbverlauf-Generator sortiert die Stopps automatisch nach Position, du kannst sie also in beliebiger Reihenfolge hinzufügen.
Häufig gestellte Fragen
Ein Farbverlauf-Generator ist ein visuelles Werkzeug, das CSS-Verlaufscode aus konfigurierbaren Farbstopps, dem Verlaufstyp und den Richtungseinstellungen erzeugt. Unser Farbverlauf-Generator unterstützt lineare, radiale und konische Verläufe mit bis zu 10 Farbstopps und gibt produktionsfertiges CSS aus. Die gesamte Generierung läuft vollständig in deinem Browser, ohne dass Daten an einen Server gesendet werden.
Lineare Verläufe blenden Farben entlang einer geraden Linie in eine bestimmte Richtung oder in einem bestimmten Winkel über. Radiale Verläufe blenden Farben von einem Mittelpunkt nach außen in kreis- oder ellipsenförmiger Ausdehnung über. Konische Verläufe blenden Farben rotierend um einen Mittelpunkt über - wie ein Farbrad. Jeder Typ hat unterschiedliche Anwendungsfälle und visuelle Wirkungen.
Ja. Die gesamte Verlaufsgenerierung erfolgt zu 100 % clientseitig in deinem Browser mit JavaScript. Deine Farbauswahl wird niemals an einen Server gesendet, niemals gespeichert und nirgendwohin übertragen. Der Farbverlauf-Generator ist vollständig privat und sicher für Kundenprojekte.
Ja. Der Farbverlauf-Generator ist 100 % kostenlos, ohne Anmeldung, ohne Premium-Funktionen und ohne Nutzungslimits. Erzeuge unbegrenzt viele Verläufe ohne Einschränkungen oder versteckte Kosten.
Die Option „Wiederholen“ ändert die Verlaufsfunktion zu repeating-linear-gradient, repeating-radial-gradient oder repeating-conic-gradient. Dadurch wird das Verlaufsmuster über das gesamte Element wiederholt und es entstehen Streifen- oder Mustereffekte. Die Mustergröße ergibt sich aus den Positionen deiner Farbstopps.
Um eine harte Kante zwischen zwei Farben zu erzeugen, setze zwei benachbarte Farbstopps auf dieselbe Position. Wenn Stopp A zum Beispiel bei 50 % liegt und Stopp B ebenfalls bei 50 %, wechselt der Verlauf an dieser Stelle abrupt von Farbe A zu Farbe B - ganz ohne Mischung.
Ja. Kopiere den Verlaufswert und verwende ihn in einer Tailwind-Klasse mit beliebigem Wert: bg-[linear-gradient(to_right,#6366f1,#ec4899)]. Ersetze in beliebigen Tailwind-Werten Leerzeichen durch Unterstriche. Alternativ kannst du den Verlauf in deiner tailwind.config.js unter theme.extend.backgroundImage ergänzen.
Der Farbverlauf-Generator unterstützt bis zu 10 Farbstopps pro Verlauf. CSS selbst hat keine strikte Obergrenze für Stopps, aber Verläufe mit mehr als 10 Stopps sind in der Praxis selten nötig. Du kannst Stopps bis zu einem Minimum von 2 entfernen.
Ja. Lineare und radiale Verläufe werden von allen modernen Browsern ohne Herstellerpräfixe unterstützt. Konische Verläufe werden von Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ unterstützt. Für ältere Browser solltest du vor der Verlaufsdeklaration eine einfarbige Fallback-Farbe vorsehen.