CSS Gradient Generator
Mischen Sie zwei Farben zu einem linearen CSS-Verlauf und kopieren Sie den Code.
background: linear-gradient(90deg, #6366f1, #a855f7);
Dieser Generator erstellt einen zweifarbigen CSS--Linearverlaufund zeigt ihn live an, während Sie ihn anpassen. Wählen Sie eine Start- und Endfarbe, ziehen Sie den Winkelregler, und das Vorschaufeld und die Codezeile werden bei jeder Änderung gemeinsam aktualisiert. Wenn es richtig aussieht, drücken Sie. Kopieren Sie CSS, um eine bereit zum Einfügen bereite-Hintergrund--Deklaration zu erhalten. Alles läuft in Ihrem Browser – Sie müssen nichts hochladen und es wird keine Bilddatei erstellt, sondern nur der CSS-Text, den Sie direkt in ein Stylesheet einfügen.
Zwei Farbstopps und ein Winkel
Die beiden Farbfelder legenAnfangundEndedes Farbverlaufs fest – standardmäßig sind sie Indigo#6366f1und Violett#a855f7 Die Mischung verläuft immer direkt von der ersten Farbe zur zweiten, ohne Zwischenstopps, sodass Sie einen sauberen Zwei-Farben-Übergang anstelle eines Multi-Stopp-Anstiegs erhalten. Der Schieberegler „-Rotationswinkel“ und „“ deckt 0–360° ab und folgt der CSS-Konvention, wobei0 Grad,den Farbverlauf nach oben zeigt,90 Grad,(Standard) von links nach rechts und180 Grad,von oben nach unten. Das Abzeichen neben dem Schieberegler zeigt den aktuellen Winkel an, und diese Zahl wird direkt in den generiertenlinear-gradient()geschrieben.
Voreinstellungen und der kopierte Code
Three presets give you a starting point in one click:Ocean(blue#3b82f6to green#10b981),Sunset(rose#f43f5eto orange#fb923c) andCandy(violett#8b5cf6bis rosa#ec4899). Eine Voreinstellung lädt einfach ihre beiden Farben in die Farbfelder, sodass Sie nachträglich immer noch den Winkel anpassen oder eine der Farben verfeinern können. Die Ausgabe lautet wie folgt:-Hintergrund: linear-gradient(90deg, #6366f1, #a855f7);– eine einzelne Deklaration, die mit einem Semikolon endet. Da es sich um einen standardmäßigen-Hintergrund--Wert handelt, funktioniert dieselbe Zeichenfolge auch inline in einem-Attribut im-Stil.
Was die Vorschau zeigt und was nicht
Das Vorschaufenster wendet genau das CSS an, das Sie kopieren möchten, sodass die Farben und die Richtung, die Sie sehen, originalgetreu sind. Was es nicht vorhersagen kann, ist die Form des Elements, in das Sie einfügen: Ein schräger Farbverlauf sieht auf einem breiten Banner anders aus als auf einer hohen, schmalen Seitenleiste, da der Winkel am eigenen Rahmen dieses Elements gemessen wird. Wenn Sie vorhaben, Text über das Ergebnis zu legen, überprüfen Sie den Kontrast an beiden Enden der Überblendung – ein Farbverlauf, der über dem hellen Ende deutlich sichtbar ist, kann den gleichen Text über dem dunklen Ende verschlucken.
Häufig gestellte Fragen
Kann ich eine dritte Farbe oder zusätzliche Stopps hinzufügen?
Nicht über die Steuerelemente – dadurch entsteht eine Zwei-Stufen-Mischung von der Startfarbe bis zur Endfarbe. Um Mittelstopps hinzuzufügen, können Sie den kopierten linear-gradient() manuell bearbeiten und zusätzliche Farben zwischen den beiden einfügen.
Was bedeutet eigentlich die Winkelzahl?
Es handelt sich um den CSS-Verlaufswinkel: 0 Grad sendet die Überblendung nach oben, 90 Grad (Standard) nach rechts und 180 Grad nach unten. Der Schieberegler bewegt sich im gesamten Bereich von 0–360°.
Erzeugt es auch radiale oder konische Farbverläufe?
Nein. Dieses Tool gibt nur einen linear-gradient() aus. Radiale und konische Farbverläufe verwenden eine unterschiedliche CSS-Syntax und werden hier nicht generiert.
Wo füge ich den kopierten Code ein?
In die Hintergrundeigenschaft einer beliebigen CSS-Regel oder inline in ein Stilattribut. Es handelt sich um eine vollständige Deklaration, die mit einem Semikolon endet, sodass für ihre Verwendung keine zusätzliche Bearbeitung erforderlich ist.