CSS-Gradientengenerator
Entwerfen Sie CSS-Hintergrundverläufe, ohne sich die Syntax merken zu müssen. Wechseln Sie zwischen linearen und radialen Typen, legen Sie einen Winkel für lineare Farbverläufe (Grad) fest und wählen Sie zwei Farbstopps bei 0 % und 100 %.
So erstellen Sie einen Farbverlauf
1. Wähle einen linearen oder radialen Farbverlauf.
2. Stellen Sie für linear den Winkel in Grad ein (0 = von unten nach oben, 90 = von links nach rechts).
3. Gib Start- und Endfarben ein (HEX).
4. Kopiere das CSS von der Ergebniskarte in dein Projekt.
Beispiele für Farbverläufe
Lineares Heldenbanner (135 Grad)
Blaugrün #6F9B96 bis Pfirsich #E8C4B8 bei 135° — eine Diagonale, die in Landingpage-Headern üblich ist. Als Hintergrund für einen Abschnitt voller Breite verwenden.
Radialer Strahler
Radialer Typ mit hellem Zentrum und dunklem Rand — simuliert eine Vignette: radial-gradient(circle, __KEEP0__ 0%, __KEEP1__ 100%).
Vertikaler Fade (180 Grad)
Winkel 180 für die Überblendung von der Markenfarbe nach Weiß von oben nach unten — nützlich hinter Navigationsleisten.
Wann sich dieses Tool lohnt
• Wenn du UI-Hintergründe prototypisieren und sofortiges visuelles Feedback wünschen.
• Wenn du vergessen, ob der 90-Grad-Winkel von links nach rechts oder von oben nach unten verläuft.
• Wenn du CSS für CodePen, beliebige Tailwind-Werte oder die Designübergabe kopieren und einfügen müssen.
Farbe hört im Detail auf
Ein Stopp ist Farbe plus optionaler Position: #ff0000 0 %, #0000ff 50 %, #00ff00 100 %. Der Browser interpoliert RGB zwischen den Stopps. Mittelstopper erzeugen gebänderte Sonnenuntergänge oder Streifen mit mehreren Marken. Beginnen Sie hier mit zwei Stopps, fügen Sie dann einen dritten Stopp in Devtools ein und hängen Sie ihn an, bis er richtig aussieht.
Häufige Fragen
Wie lautet die CSS-Syntax für einen linearen Farbverlauf?
Hintergrund: linear-gradient(angle, color1 0%, color2 100%); Der Winkel wird in Grad angegeben. Farben sind Stopps entlang der Linie.
Wie funktionieren Farbstopps?
Stopps markieren die Positionen der einzelnen Farben auf der Verlaufslinie. 0 % ist der Anfang, 100 % das Ende. Dieses Werkzeug repariert zwei Anschläge; Fügen Sie bei Bedarf weitere in deinem Editor hinzu.
Linear vs. radial?
Lineare Mischungen entlang einer geraden Linie. Radial verläuft von einem Mittelpunkt nach außen — gut für Kreise und weiche Stellen.
Welche Winkelwerte sind üblich?
0 Grad nach oben, 90 Grad nach rechts, 180 Grad nach unten, 135 Grad diagonal — üblich für Karten und Helden.
Wird ein Hintergrund oder ein Hintergrundbild festgelegt?
Die Ausgabe verwendet die Hintergrundkürzel, die für die meisten Divs geeignet ist. Du kannst in ein Hintergrundbild aufteilen, wenn Sie andere Ebenen überschreiben.