CSS-Gradientengenerator
Erstellen Sie lineare, radiale und konische CSS-Verläufe in Ihrem Browser.
Farbstopps
Verwenden Sie die Stopp-Griffe oder die Pfeiltasten der Tastatur, um Positionen zu bearbeiten. Jeder Stopp enthält eine explizite Farbe, Deckkraft und einen Prozentsatz.
Browser-native lokale Verarbeitung
Ihr Farbverlauf bleibt in diesem Browser. Keine Farben oder generierten CSS werden an Convertr gesendet.
Begrenzte Import-Grammatik
Import akzeptiert linear-gradient(), radial-gradient() oder conic-gradient() mit Hex-Farben und Prozentangaben. Deklarationen, URLs, Variablen und unbekannte Funktionen werden lokal abgelehnt.
Zugänglicher Fallback
Das generierte CSS enthält einen soliden background-color-Fallback neben dem Farbverlauf für nicht unterstützte Renderer und zugängliche Steuerungs-Chrome.
Häufig gestellte Fragen
Wird mein Gradient hochgeladen?
Nein. Der Gradientenzustand, die Farben, das importierte CSS und das generierte CSS bleiben in Ihrem Browser.
Welche CSS-Gradiententypen werden unterstützt?
Der Generator erstellt Ausgaben für linear-gradient(), radial-gradient() und conic-gradient() mit mehreren Hex-Farbstopps.
Was kann ich importieren?
Der Import akzeptiert eine bewusst begrenzte Grammatik, die eine unterstützte Gradientenfunktion, Hex-Farben, optionale Prozentsätze und begrenzte Winkel- oder Positionsangaben verwendet.
Verwandte Entwickler- und Designtools
CSS-Gradientengenerator
Erstellen Sie lineare oder radiale CSS-Verläufe und zeigen Sie eine Vorschau der Farbstopps, des Winkels, der Position und der Wiederholung an.
- Eingabe
- Verlauftyp, Farbstopps, Positionen, Winkel und Wiederholungseinstellungen.
- Ausgabe
- Eine Live-Vorschau und kopierbare CSS-Hintergrunddeklaration.
- Reale Einschränkungen
- Das Browser-Rendering kann je nach Engine leicht variieren, und das Tool bewertet keinen Kontrast und garantiert keine Unterstützung in älteren Browsern.
- Datenschutz und Datenverarbeitung
- Gradient-Typ, Farbstoppungen, Positionen, Ecke und Wiederholungsinstellungen werden in dieser Browser-Tabelle verarbeitet. Convertr erhält es nicht oder speichert es; Schließen oder neu laden die Seite klärt den Arbeitsstatus, es sei denn, das Tool bietet ausdrücklich eine lokale Download.
So verwenden Sie dieses Tool
- Geben Sie Verlauftyp, Farbstopps, Positionen, Winkel und Wiederholungseinstellungen in den Tool-Steuerelementen an.
- Wählen Sie die Einstellungen aus, die eine Live-Vorschau und eine kopierbare CSS-Hintergrunddeklaration beeinflussen, und führen Sie das Tool aus.
- Überprüfen Sie eine Live-Vorschau und eine kopierbare CSS-Hintergrunddeklaration, bevor Sie sie kopieren oder herunterladen.
Häufige Fehlermodi
Ein fehlender Farbstopp, eine ungültige Farbe oder eine inkompatible Position verhindert, dass eine gültige CSS-Deklaration erstellt wird.
Nützliches Beispiel
Erstellen Sie einen 90-Grad-linearen Verlauf von #111827 bei 0 % bis #f59e0b bei 100 % und kopieren Sie die Deklaration.