English
Español
Português
Français
Deutsch
Italiano
Türkçe
Bahasa IndonesiaVerlauf Generator
Lineare, radiale und konische Verläufe mit 2–5 Farben und eigenen Winkeln erstellen. Live-Vorschau, Presets, Zufall per Leertaste, Tailwind- und CSS-Ausgabe, PNG-Download. Leertaste drücken.
Richtung & Form
Farbstopps (2)
CSS-Ausgabe
Verlauf herunterladen
Format zur Vorschau wählen, dann herunterladen
Was ist ein Verlaufsgenerator?
Weiche Farbübergänge, ohne Bilder
Ein Verlauf blendet zwei oder mehr Farben entlang einer Linie, ab einer Mitte, oder um einen Punkt. Browser rendern ihn als scharfes auflösungsunabhängiges CSS. Perfekt für Heros, Buttons, Karten und Overlays ohne Netzwerkanfragen.
Dieses Tool kann mehr als 2-Farben Basics: linear plus radial plus konisch Typen, bis zu 5 Stopps mit Positionen, 8 Presets, Zufallsinspiration, Tailwind arbitrary Klassen, und PNG Export.
Anleitung
01
Typ und Farben wählen
Linear, radial oder konisch. Jeden Stopp mit Picker, HEX oder 0-100% Regler bearbeiten. Bis zu 5 hinzufügen, bis auf 2 entfernen.
02
Richtung festlegen
Winkelregler plus 45° Presets für linear/konisch, Form plus Position für radial. Presets oder Leertaste für Zufall nutzen.
03
Kopieren und liefern
CSS oder Tailwind kopieren, CSS+PNG laden, oder URL teilen. Stopps und Winkel bleiben in ?type=&angle=&stops=.
Praxisbeispiele
Hero Hintergründe: 135deg Indigo zu Pink
Diagonale 2-Farb Flächen bleiben unter weißem Text lesbar und schrumpfen auf eine CSS Zeile. Mit dem Indigo Pink Preset starten.
Buttons und CTAs: 90deg 3-Stopp
Sunset Dreier geben kleinen Elementen Tiefe. Mittleren Stopp für gleichmäßige Blends in Hover Zuständen nahe 50% halten.
Glows und Spotlights: radial
Radiale Ellipse oben erzeugt sanfte Aurora hinter Karten. Mit dunklen Flächen für konztrastsichere Overlays paaren.
Fortschrittsringe: konisch
Konische Winkel Sweeps passen zu Tortendiagrammen und Loadern. Zwei Stopps mit harten Positionen geben segmentierte Ringe.
Tailwind Versand
Die arbitrary bg-[linear-gradient(...)] Klasse direkt ins Markup kopieren, oder Config Snippet für Wiederverwendung speichern.
Social und OG Bilder
1200x630 PNG Snapshots für Cover, Thumbnails und Platzhalter laden, ohne Designtool zu öffnen.
Animierte Verläufe und Verlaufstext
Jede Ausgabe wiederverwenden: background-position für Schimmer Hintergründe animieren, oder mit background-clip:text für Verlaufsheadlines paaren. CSS kopieren und zwei Keyframes ergänzen.