CSS-Verlaufsgenerator

Gestalten Sie lineare, radiale und konische CSS-Verläufe visuell. Fügen Sie Farbstopps hinzu, passen Sie Positionen an und kopieren Sie den gebrauchsfertigen CSS-Code.

Sofortergebnis Läuft im Browser
CSS-Verlaufsgenerator
135°

Voreinstellungen

CSS-Verlaufstipps

Farbverläufe funktionieren mit jeder CSS-Eigenschaft, die Bilder akzeptiert: Hintergrund, Hintergrundbild, Rahmenbild, Maske und mehr. Verwenden Sie durch Kommas getrennte Farbverläufe, um sie zu überlagern: Hintergrund: linearer Farbverlauf(...), linearer Farbverlauf(...); CSS: background, background-image, border-image, mask; background: linear-gradient(...), linear-gradient(...);

Wie benutzt man?

  1. 1
    Wählen Sie VerlaufstypWählen Sie „Linear“, „Radial“ oder „Konisch“. Passen Sie den Winkel für lineare oder konische Farbverläufe an.
  2. 2
    Legen Sie Farbstopps festWählen Sie Farben und Positionen für jeden Stopp. Fügen Sie weitere Stopps für komplexe Verläufe hinzu.
  3. 3
    Kopieren Sie das CSSKlicken Sie auf CSS kopieren, um den Code zum Einfügen zu erhalten, oder kopieren Sie nur den Hintergrundwert.

FAQ

Was ist ein CSS-Gradient?
Ein CSS-Verlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, der ausschließlich vom Browser generiert wird – es ist keine Bilddatei erforderlich. Lineare Farbverläufe verlaufen in einer geraden Linie, radiale Farbverläufe gehen strahlenförmig von einem Mittelpunkt aus und konische Farbverläufe bewegen sich wie ein Farbkreis um einen Mittelpunkt.
Wie viele Farbstopps kann ich hinzufügen?
Dieses Tool unterstützt bis zu 8 Farbstopps. Für CSS selbst gibt es kein offizielles Limit, aber Browser bewältigen Dutzende Stopps problemlos.
Ist das generierte CSS mit allen Browsern kompatibel?
Ja. Die Ausgabe verwendet die Standardsyntax ohne Präfix, die von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt wird. Internet Explorer 9 ist der einzige große Browser, der das ältere Präfix -ms- benötigt, das dieses Tool weglässt.

CSS-Gradienten für Hintergründe erstellen

Der CSS Gradient Generator erstellt lineare, radiale und konische Verläufe mit mehreren Farbstopps. Du kannst den Verlaufstyp wählen, bei linearen und konischen Varianten den Winkel verändern, Farbstopps hinzufügen oder entfernen und ihre Position in Prozent anpassen. Die Vorschau wird sofort aktualisiert, und das Werkzeug erzeugt sowohl eine komplette background-Deklaration als auch den reinen Gradient-Ausdruck. Dadurch lässt sich der Code direkt in CSS, Inline-Styles, Design-Prototypen oder Theme-Dateien übernehmen.

Die Seite startet mit einer typischen linearen Kombination und bietet Presets für schnelle Richtungen. Jeder Stopp besteht aus Farbe und Position, zum Beispiel #3B82F6 0% und #8B5CF6 100%. Bei linearen Verläufen wird der Winkel in Grad geschrieben, etwa linear-gradient(135deg, ...). Radiale Verläufe werden als Kreis aufgebaut, konische Verläufe laufen um einen Mittelpunkt und nutzen den Winkel als Startpunkt. Über Zufall können zwei bis vier Stopps neu gemischt werden, wenn ein Entwurf schnell exploriert werden soll.

Gute Verläufe im UI verwenden

Ein Verlauf sollte die Lesbarkeit unterstützen und nicht gegen den Inhalt arbeiten. Für große Flächen sind meist wenige, nahe beieinanderliegende Farben besser als harte Regenbogenkombinationen. Für Buttons und Badges dürfen Kontraste stärker sein, aber Text braucht weiterhin ausreichend Abstand zum Hintergrund. Wenn ein Verlauf hinter weißer Schrift liegt, prüfe die hellsten Bereiche besonders sorgfältig. Bei Karten, Hero-Bildern oder Callouts kann ein Verlauf die visuelle Hierarchie verbessern; auf Formularflächen, Tabellen oder langen Textabschnitten lenkt er dagegen oft ab.

CSS-Verläufe sind vektorbasiert und skalieren ohne Bilddatei, trotzdem haben sie Grenzen. Sehr komplexe Kombinationen mit vielen Stopps können unruhig wirken, und konische Verläufe werden nicht in jedem alten Browser gleich dargestellt. Für produktive Oberflächen lohnt es sich, die generierte Farbe in Variablen zu speichern und eine einfache Fallback-Farbe zu definieren. Der Generator berechnet keinen Markenstil und keine Barrierefreiheit; er liefert einen präzisen CSS-Ausdruck, mit dem du verschiedene Richtungen schnell testen kannst. Gute Ergebnisse entstehen, wenn du den Verlauf im echten Layout mit Text, Icons, Hover-Zuständen und dunklem oder hellem Theme prüfst.

Wenn du den Verlauf in einer CSS-Datei nutzt, halte die generierte Deklaration möglichst lesbar. Bei mehreren Stopps lohnt es sich, Farben zuerst als Variablen zu definieren und den Verlauf daraus aufzubauen. So können Themes oder Markenfarben später geändert werden, ohne jeden Gradient-Ausdruck neu zu suchen. Prüfe außerdem Screenshots auf unterschiedlichen Monitoren, weil feine Farbübergänge je nach Panel, Kompression und Browser-Rendering anders wirken können.

Speichern Sie gelungene Varianten direkt als CSS, damit sie im Stylesheet ohne Nachbau weiterverwendet werden koennen.

Bei dunklen Hintergruenden sollte der Verlauf zusaetzlich mit echtem Text getestet werden, damit Lesbarkeit und Kontrast erhalten bleiben.

Kommentare