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 %. Die Vorschau wird sofort aktualisiert. Kopiere die vollständige Hintergrund- oder Hintergrundbilddeklaration in dein Stylesheet. Unterstützt HEX-Farbeingabe mit Validierung.
Winkel (°)
Farbe 1
Farbe 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 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.
Wann du besser etwas anderes wählst?
• Wenn du mehr als zwei Farbstopps benötigen, erweitern Sie das kopierte CSS manuell oder verwenden Sie eine Design-App.
• Wenn du konische (Sweep-)Verläufe wünschen — wird hier nicht unterstützt.
• Wenn du automatische Dunkelmodusvarianten benötigen, duplizieren und passen Sie die Farben separat an.
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.
Lineare Steigungswinkel
CSS misst Winkel im Uhrzeigersinn von „oben“ (0 Grad). Das unterscheidet sich vom Mathematikunterricht, wo Winkel oft von rechts beginnen. Wenn ein Farbverlauf falsch gedreht aussieht, addieren oder subtrahieren Sie 90 Grad. Nutze zur Feinabstimmung die Live-Bearbeitung von Devtools neben diesem Generator.
Leistung und Fallbacks
Farbverläufe sind in modernen Browsern GPU-freundlich. Legen Sie für sehr alte Clients einen festen Hintergrundfarben-Fallback auf die hellere Stoppfarbe vor der Verlaufslinie fest.
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.
Werden Farben an einen Server gesendet?
Nein. Die Vorschau wird lokal gerendert.
Ist das kostenlos?
Ja, kein Konto erforderlich.