CSS Gradient Generator
Generieren Sie schöne CSS Gradienten mit Live-Vorschau. Erstellen Sie lineare, radiale und konische Gradienten mit benutzerdefinierten Farben, Winkeln und Positionen. Kopieren Sie gebrauchsfertige CSS.
Gradient type
135°
Color stops
#667eea0%
#764ba2100%
Presets
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
So verwenden Sie CSS Gradient Generator
- 1Wählen Sie den Gradiententyp: linear, radial oder konisch.
- 2Fügen Sie Farbstopps hinzu und legen Sie deren Positionen fest.
- 3Passen Sie den Winkel oder die Richtung für lineare Gradienten an.
- 4Kopieren Sie das generierte CSS zur Verwendung in Ihrem Projekt.
ZenovayAnalytics
Wissen Sie, was Ihre Besucher wirklich tun.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.Häufig gestellte Fragen
Was ist ein CSS-Farbverlauf?▾
Ein CSS-Farbverlauf ist ein glatter Übergang zwischen zwei oder mehr Farben, der ohne Bilddateien erstellt wird. Typen: linear-gradient() – Farben entlang einer geraden Linie in einem bestimmten Winkel; radial-gradient() – Farben, die von einem Mittelpunkt nach außen strahlen; conic-gradient() – Farben, die um einen Mittelpunkt geschwungen werden (wie ein Tortendiagramm, in allen modernen Browsern unterstützt); repeating-*-Varianten wiederholen das Muster. Verläufe sind Werte für die background-image-Eigenschaft, nicht background-color.
Wie funktioniert linear-gradient?▾
Syntax: linear-gradient(direction, color-stop1, color-stop2, ...). Richtung: Winkel (0deg = unten nach oben, 90deg = links nach rechts) oder Schlüsselwort (to right, to bottom left). Farbstopps: Farben mit optionalen Positionen. Beispiel: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Ohne Positionen werden Stopps gleichmäßig verteilt. Mit Positionen: linear-gradient(to right, red 20%, blue 80%) bedeutet 20 % rot, dann Übergang, dann 80 % blau bis zum Ende.
Was sind Farbhinweise in Verläufen?▾
Farbhinweise (auch Übergangshinweise oder Mittelpunkte genannt) steuern, wo der Mittelpunkt des Verlaufsübergangs liegt. Normalerweise sind Übergänge zwischen Stopps linear – der Mittelpunkt liegt genau zwischen zwei Farben bei 50 %. Ein Hinweis verschiebt diesen Mittelpunkt. Beispiel: linear-gradient(to right, red, 25%, blue) – der Mittelpunkt des Rot-zu-Blau-Übergangs liegt bei 25 % (näher an der roten Seite), sodass er insgesamt blauer wirkt. In allen modernen Browsern unterstützt.
Was ist der Unterschied zwischen radialen und konischen Verläufen?▾
radial-gradient() strahlt von einem Mittelpunkt nach außen in elliptischen oder kreisförmigen Formen. Syntax: radial-gradient(shape size at position, colors). Beispiel: radial-gradient(circle at center, white, black). conic-gradient() schwenkt Farben um einen Mittelpunkt wie ein Farbkreis oder Tortendiagramm. Syntax: conic-gradient(from angle at position, colors). Beispiel: conic-gradient(red, yellow, green, blue, red). Beide unterstützen Farbstopps mit Prozentwertpositionen.
Wie verwende ich Verläufe in Tailwind CSS?▾
Tailwind unterstützt lineare Verläufe über: bg-gradient-to-{direction} (z. B. bg-gradient-to-r) + from-{color} + via-{color} (optional) + to-{color}. Beispiel: class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500". Für radiale/konische Verläufe oder komplexe benutzerdefinierte Verläufe verwenden Sie die [arbitrary value]-Syntax: bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)] oder fügen Sie einen benutzerdefinierten Verlauf zu tailwind.config.js backgroundImage hinzu. Tailwind v3.3+ hat die Unterstützung für beliebige Verläufe verbessert.