CSS-Verlaufsgenerator
Passe Farbstopps und Winkel auf dem Bildschirm an, um lineare und radiale Verläufe zu bauen. Stimmt die Vorschau, kopierst du das fertige CSS.
Klicke auf die Leiste zum Hinzufügen, ziehe einen Griff zum Verschieben, klicke einen Griff zum Entfernen.
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);So verwendest du den CSS-Verlaufsgenerator
Hier ist der ganze Ablauf – vom Erstellen eines Verlaufs bis zum fertigen CSS-Code.
Typ und Richtung wählen
Wähle zunächst linear oder radial. Bei linearen Verläufen bestimmst du über den Winkel, in welche Richtung die Farben fließen; bei radialen wählst du Kreis oder Ellipse und formst so, wie sich die Farbe ausbreitet.
Farbstopps bearbeiten
Klicke auf die Farbleiste, um einen Stopp hinzuzufügen, ziehe einen Griff zum Verschieben und klicke einen Griff zum Entfernen. Passe Farbe und Position (%) jedes Stopps an, bis der Farbverlauf so aussieht, wie du ihn willst.
Live-Vorschau prüfen
Jede Anpassung erscheint sofort in der Vorschau. Stell dir beim Verfeinern von Farben und Richtung vor, wo der Verlauf eingesetzt wird – Hintergrund, Button oder Banner. Wenn du bei null anfängst, ist ein Preset aus den empfohlenen Verläufen, im Editor geöffnet, eine gute Abkürzung.
CSS-Code kopieren
Bist du fertig, wird die background-Deklaration automatisch im CSS-Ausgabebereich erzeugt. Drücke Kopieren und füge den Code direkt in dein Stylesheet oder deine Komponentenstile ein.
Einen Verlauf in der gewünschten Stimmung gestalten
Passe Farben, Winkel und Stopp-Positionen an und prüfe den Verlauf in der Vorschau. So kannst du Einstellungen für Hintergründe, Karten, Schaltflächen und Banner vergleichen.
Den fertigen CSS-Code direkt kopieren
Dein fertiger Verlauf wird automatisch als CSS-background-Code erzeugt. Mit einem Klick auf den Kopieren-Button speicherst du den Code mit deinen aktuellen Einstellungen in der Zwischenablage und fügst ihn direkt in dein Projekt ein.
Einsatzmöglichkeiten für Verläufe
Ein Verlauf ist der einfachste Weg, einem flachen Design Tiefe und Stimmung zu geben.
Hero- & Banner-Hintergründe
Lege einen Verlauf auf Basis deiner Markenfarben unter den Hauptbereich und du bekommst einen hochwertigen Hintergrund ganz ohne Bild. Er ist zudem leichter als eine Bilddatei, was der Ladezeit zugutekommt.
Akzente für Buttons & Karten
Ein dezenter Verlauf auf Buttons oder Karten zieht den Blick besser an als flache Volltonfarben. Mit zwei Stopps desselben Farbtons in unterschiedlicher Helligkeit zu starten geht selten schief.
Thumbnail- & Poster-Hintergründe
Nutze Verläufe hinter YouTube-Thumbnails, Veranstaltungspostern und Social Cards. Wähle dort, wo Text sitzen soll, Farben mit geringem Helligkeitsunterschied, und die Lesbarkeit bleibt erhalten.
Hintergründe für den Dark Mode
Verläufe zwischen dunklen Tönen geben Dark-Theme-Oberflächen Tiefe. Mischst du tiefes Marineblau und Violett statt reinem Schwarz, wirkt es weicher.
Empfohlene Verläufe
Öffne eine Vorlage im Editor oder kopiere den CSS-Code direkt. Passe Farben, Stopps und Winkel an den vorgesehenen Hintergrund, Button, die Karte oder das Poster an.
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);background: linear-gradient(60deg, #ff5e62 0%, #ff9966 100%);background: linear-gradient(120deg, #2193b0 0%, #6dd5ed 100%);background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);background: linear-gradient(110deg, #00c6ff 0%, #7d5fff 50%, #ff5edf 100%);background: radial-gradient(ellipse, #ffd86f 0%, #fc6262 100%);Häufig gestellte Fragen
Welche Verlaufstypen werden unterstützt?
Lineare und radiale Verläufe werden unterstützt. Ein linearer Verlauf lässt Farben in eine Richtung ineinander übergehen. Über den Winkel kannst du den Verlauf von links nach rechts, von oben nach unten, diagonal oder ganz nach Wunsch ausrichten. Ein radialer Verlauf breitet die Farbe von einem Mittelpunkt nach außen aus. Das eignet sich gut für leuchtende Hintergründe, Hervorhebungen und sanfte Akzenteffekte. Beispiele) Linearer Verlauf: Buttons, Banner, Kartenhintergründe Radialer Verlauf: Hero-Hintergründe, Akzenteffekte, Lichtstimmung
Kann ich den CSS-Code kopieren?
Ja, der erstellte Verlauf lässt sich direkt als CSS-background-Code kopieren. Wenn du zum Beispiel einen linearen Verlauf erstellst, entsteht Code wie dieser.
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);Den kopierten Code kannst du in CSS-Dateien, React/Vue-Komponentenstilen, HTML-Inline-Styles, Tailwind-Custom-Styles und mehr verwenden.
Gibt es eine Begrenzung für die Anzahl der Farbstopps?
Ein Farbstopp markiert die Stelle, an der eine Farbe in einem Verlauf beginnt oder wechselt. In der Regel reichen schon zwei Farben für einen einfachen Verlauf, und mit weiteren Stopps lassen sich komplexere, reichere Farbverläufe gestalten. Ein einfacher Hintergrund von Blau zu Violett kommt zum Beispiel mit zwei Stopps aus, während Designs mit mehreren aufeinanderfolgenden Farben – etwa Regenbogenfarben oder mehrschichtige Hintergründe – mit drei oder mehr Stopps gut funktionieren. Zu viele Stopps können den Farbverlauf jedoch unruhig wirken lassen, daher sind im typischen UI-Design etwa zwei bis vier zu empfehlen.
Kann ich die empfohlenen Verläufe bearbeiten?
Ja. Du kannst einen empfohlenen Verlauf unverändert kopieren und verwenden oder ihn im Editor öffnen, um Farben oder Winkel zu ändern. Wenn dir die Farbwahl von Grund auf schwerfällt, wähle zuerst eine empfohlene Vorlage und passe sie dann Schritt für Schritt an deine Markenfarben oder die Stimmung deines Projekts an.
Werden Verläufe in Browsern gut dargestellt?
Die meisten modernen Browser unterstützen CSS linear-gradient() und radial-gradient(). In gängigen Browsern wie Chrome, Edge, Safari und Firefox funktionieren sie in der Regel problemlos. In älteren Browsern oder besonderen Umgebungen können einzelne Details jedoch anders aussehen. Prüfe daher am besten in den wichtigsten Browsern, bevor du sie in einer Produktivumgebung einsetzt.