CSS-Verlaufsgenerator
Gestalte lineare und radiale Verläufe visuell und kopiere sofort einsetzbares 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%);Einen Verlauf in der gewünschten Stimmung gestalten
Passe Farben, Winkel und Stopp-Positionen an und sieh den Verlauf live in der Vorschau. Prüfe direkt den Farbverlauf für Hintergründe, Karten, Buttons und Banner und gestalte schnell den gewünschten Stil.
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.
Empfohlene Verläufe
Wir haben häufig genutzte Farbkombinationen als Vorlagen vorbereitet. Wähle einen Verlauf, der dir gefällt, um ihn direkt im Editor zu bearbeiten, oder kopiere seinen CSS-Code für dein Projekt. Passe Farben und Winkel an Hintergründe, Buttons, Karten, Banner und Poster an und gestalte deinen eigenen Verlauf.
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 es auf dem Smartphone verwenden?
Ja, es funktioniert auch in mobilen Browsern. Auch auf dem Smartphone oder Tablet kannst du Farben und Winkel anpassen, einen Verlauf erstellen und den CSS-Code kopieren. Wenn du die Stopp-Positionen jedoch fein einstellen möchtest, kann das Arbeiten am PC bequemer sein.
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.