CSS-Gradientengenerator
Erstellen Sie wunderschöne CSS-Verläufe visuell – passen Sie Farben, Stopps und Richtung an und Kopie den fertigen CSS-Code.
Farbstopps
CSS-Ausgabe
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);Warum den PixConvert-Gradientengenerator verwenden?
Visueller Gradientengenerator mit sofortiger CSS-Ausgabe – kein Rätselraten von Hexadezimalwerten.
Linear & Radial
Erstellen Sie lineare Farbverläufe mit beliebigem Winkel oder radiale Farbverläufe mit konfigurierbarer Form und Position.
Mehrere Farbstopps
Fügen Sie bis zu 10 Farbstopps mit verschiebbaren Positionen hinzu. Unterstützt alle CSS-Farben, einschließlich RGBA und HSLA.
Winkelsteuerung
Ziehen Sie den Winkelregler oder geben Sie einen genauen Gradwert ein. Gängige Richtungen (nach rechts, nach unten rechts) sind voreingestellt.
Live-Vorschau
Die Vorschau des Farbverlaufs in voller Breite wird in Echtzeit aktualisiert, sobald Sie einen Wert anpassen.
Fertiges CSS zum Einfügen
Die Ausgabe ist eine saubere CSS-Zeichenkette mit der Hintergrund Eigenschaft, die direkt in ein beliebiges Stylesheet eingefügt werden kann.
Zufällig
Klicken Sie auf „Zufällig“, um sich sofort inspirieren zu lassen – es wird eine wunderschöne, zufällige Farbverlaufskombination erzeugt.
Anwendungsfälle für CSS-Gradienten
Farbverläufe sind im modernen UI-Design allgegenwärtig.
Heldenhintergründe
Erstellen Sie ansprechende Hintergrund für die Hero-Bereiche der Landingpage.
- Ganzseitige Heldenhintergründe
- Abschnittsteiler-Gradienten
- Überlagern Sie Farbverläufe auf Bildern
Button- und Kartengestaltung
Verleihen Sie Schaltflächen, Karten und Abzeichen mit dezenten Farbverläufen mehr Tiefe.
- Farbverläufe für primäre Aktionsschaltflächen
- Akzente im Kartenkopf
- Fortschrittsbalken füllt sich
Markendesign
Erstellen Sie markenkonforme Farbverläufe, die zu Ihrer Farbpalette passen.
- Logo- Hintergrund
- App-Symbolhintergründe
- Social-Media-Inhalte
So erstellen Sie einen CSS-Farbverlauf
Wählen Sie zwischen linearem, radialem oder konischem Typ. Wählen Sie Ihre Farben und passen Sie die Anschlagpositionen an. Stellen Sie Winkel oder Richtung ein.
Die Live-Vorschau wird sofort aktualisiert. Klicken Sie auf „CSS kopieren“, um den fertigen CSS- Hintergrund zu Kopie .
Wechseln Sie zwischen linearen und radialen Typen und passen Sie Winkel oder Form an – fügen Sie den resultierenden Hintergrund in Ihr Stylesheet ein.
Weitere Tools entdecken
Entdecken Sie weitere kostenlose Tools, die hervorragend mit diesem Tool harmonieren.
Kontrastprüfer
Überprüfen Sie die Farbkontrastverhältnisse auf WCAG-Konformität.
Boxschattengenerator
CSS-Box-Shadows mit Live-Vorschau gestalten
Farbkonverter
Konvertieren Sie HEX-, RGB- und HSL-Farbcodes sofort
Farbpaletten-Extraktor
Dominante Farben aus beliebigen Bildern extrahieren
JSON-Formatter
JSON sofort formatieren, validieren und minimieren
Regex-Tester
Reguläre Ausdrücke live testen und debuggen
Häufig gestellte Fragen
CSS-Farbverläufe erklärt.
Was ist ein CSS-Gradient?
Ein CSS-Farbverlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, der in reinem CSS ohne Bilder definiert wird. Typen: linearer Farbverlauf (gerichtet), radialer Farbverlauf (kreisförmig/elliptisch), konischer Farbverlauf (rotierend um einen Mittelpunkt).
Benötige ich das Präfix -webkit-?
Nein, für moderne Browser (Chrome 26+, Firefox 16+, Safari 7+). Das Präfix „-webkit-“ wird nur für sehr alte Browser benötigt. Aktivieren Sie es in den Optionen, wenn Sie Unterstützung für IE10 oder ältere Safari-Versionen benötigen.
Wie erstelle ich einen transparenten Farbverlauf?
Verwenden Sie RGBA-Farben – z. B. rgba(0, 0, 0, 0) für transparent. Um einen Übergang zu transparent zu erreichen, setzen Sie den Endpunkt auf rgba(255,255,255,0) für Weiß-zu-Transparent oder rgba(0,0,0,0) für Schwarz-zu-Transparent.
Kann ich CSS-Variablen in Farbverläufen verwenden?
Ja, aber dieses visuelle Tool generiert Hex-/RGBA-Werte. Um benutzerdefinierte CSS-Eigenschaften zu verwenden, Kopie die Ausgabe und ersetzen Sie die Farbwerte manuell durch Ihre Variablen (z. B. var(--color-primary)).
Welche Browser unterstützen konische Farbverläufe?
Der Conic-Gradient-Effekt wird in Chrome 69+, Edge 79+, Safari 12.1+ und Firefox 83+ unterstützt. Im Internet Explorer wird er nicht unterstützt. Verwenden Sie stattdessen `@supports(Hintergrund: conic-gradient(red, blue))` für eine alternative Darstellung mit progressiver Verbesserung.