Drücke Ctrl+D, um diese Seite als Lesezeichen zu speichern
Kostenloser CSS-Gradient-Generator. Lineare, radiale und konische Gradienten visuell gestalten und CSS-Code sofort kopieren. Alles im Browser.
Wie benutzt man Verlaufsgenerator?
Gradienttyp wählen.
Farbstopps hinzufügen und Farben einstellen.
Generierten CSS-Code kopieren.
Häufig gestellte Fragen zu Verlaufsgenerator
Welche Gradienttypen werden unterstützt?
Linear, radial und konisch.
Kann ich den CSS-Code direkt kopieren?
Ja, mit einem Klick den CSS-Code kopieren und direkt verwenden.
Warum entsteht in der Mitte meines Verlaufs ein grauer Streifen?
Liegen zwei Farben im Farbkreis gegenüber, führt die Mischung durch einen Punkt, an dem die Sättigung nahezu null erreicht – und genau das erscheint als stumpfer grauer Streifen. Blau-Orange und Rot-Grün sind die typischen Verursacher. Eine dritte Farbe als Zwischenstopp lenkt den Verlauf um das Grau herum, und zwei benachbarte Farbtöne vermeiden das Problem von vornherein.
Kann ich den Verlauf auch als Bilddatei speichern, nicht nur als CSS?
Ja, Sie können ein PNG herunterladen und direkt als Folienhintergrund, Social-Media-Bild oder Druckvorlage verwenden. Für eine Webseite ist das CSS aber die bessere Wahl: keine Datei zum Laden, der Verlauf dehnt sich auf jede Bildschirmgröße, ohne zu brechen, und es entsteht nie die Treppenbildung eines hochskalierten Bitmaps.
Wie nutzt man Verlaufsgenerator optimal?
Mischen Sie zwei Farbtöne, die im Farbkreis nah beieinanderliegen – Gegensätze werden in der Mitte grau.
Eine Diagonale mit 135 Grad ist der sicherste Standard für Banner und Kartenhintergründe.
Kommt Text darauf, prüfen Sie den Kontrast am hellsten Farbstopp, nicht am Mittelwert.