Gradienten-Generator

Mit Gradienten-Generator können Designer und Frontend-Entwickler eine Oberfläche vor der Umsetzung abstimmen. Erstellen Sie einen linearen CSS-Gradienten.

Erstellen Sie einen linearen CSS-Gradienten. Sie können es kostenlos im Browser ohne Konto nutzen und das Ergebnis vor dem nächsten Schritt prüfen.

Bedienung

Geben Sie zuerst den Winkel des Verlaufs in Grad ein; er entscheidet, in welche Richtung sich die Farben über das Element bewegen.
Fügen Sie die Startfarbe in der nächsten Zeile und die Endfarbe darunter hinzu.
Erzeugen Sie den Verlauf: Der Ergebnisbereich zeigt eine CSS-Zeile, die Sie direkt in Ihr Projekt kopieren können.
Fügen Sie diese Zeile in die Regel ein, an der Sie arbeiten, und laden Sie dann die Seite neu, um zu sehen, wie es tatsächlich aussieht.
Ändern Sie den Winkel oder eine Farbe und erzeugen Sie so oft wie gewünscht neu, bevor Sie sich für einen endgültigen Stil entscheiden.

Beispiel

Das Beispiel verwendet einen Winkel von 45 Grad mit einem sehr dunklen Blau am Anfang und einem kräftigen Grün am Ende. Vergleichen Sie nach dem Erzeugen die erhaltene Zeile mit Ihrer Vorstellung: Der Winkel legt die Richtung fest, während die Farbreihenfolge den Farbton an jedem Ende bestimmt.

Eingabe

45
#0F172A
#16A34A

Ergebnis

background: linear-gradient(45deg, #0F172A, #16A34A);

Grenzen und Formate

Es werden nur lineare Verläufe erzeugt; radiale, konische und wiederholende Varianten benötigen eine andere Syntax.
Zwei Farben ergeben eine einfache Mischung, aber Zwischenstopps können von dieser Seite aus nicht angepasst werden.
Das Ergebnis hängt vom Bildschirm und Browser des Besuchers ab, und eine sehr kontrastreiche Mischung kann das Auge ermüden, wenn Text darüber liegt.
Prüfen Sie den Kontrast, wenn Sie Text über den Verlauf legen, denn die Lesbarkeit lässt sich nicht allein anhand des Codes beurteilen.

Wo die Verarbeitung stattfindet

Der Verlauf wird in Ihrem Browser erzeugt. Der Winkel und beide Farben bleiben auf Ihrem Gerät, nichts wird übertragen und nichts wird gespeichert, sobald Sie die Seite verlassen, daher wird der von Ihnen kopierte Ausschnitt vollständig auf Ihrem eigenen Rechner erstellt.

Häufige Fragen

Kann ich den erzeugten Code in einer anderen Regel wiederverwenden?

Ja. Die Zeile folgt der Standardsyntax für einen linearen Verlauf und passt in jede Hintergrunddeklaration. Kopieren Sie sie unverändert und ändern Sie nur die Farben, wenn sich Ihre Palette später weiterentwickelt.

Wie erhalte ich einen Verlauf, der von oben nach unten verläuft?

Verschieben Sie den Winkel in kleinen Schritten und behalten Sie den Wert, der Ihre erste Farbe oben im Element platziert. Da das Ergebnis durch Neuladen der Seite überprüft wird, reichen meist ein oder zwei Versuche, um die gewünschte Richtung zu treffen.

Kann ich mehr als zwei Farben verwenden?

Diese Seite geht von einer Anfangsfarbe und einer Endfarbe aus, daher kann eine Mischung aus drei Farbtönen hier nicht direkt eingerichtet werden. Sie können trotzdem ein erstes Paar erzeugen und die zusätzlichen Stopps anschließend von Hand in Ihrem eigenen Stylesheet ergänzen.