CSS-Gradientengenerator
Erstellen Sie lineare, radiale und konische CSS-Verläufe in Ihrem Browser.
Farbverläufe
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.
CSS-Gradientengenerator
Erstellen Sie lineare oder radiale CSS-Gradienten und prävisieren Sie Farbstoppungen, Winkel, Position und Wiederholung.
- Eingabe
- Gradienttyp, Farbstoppungen, Positionen, Angeln und Wiederholungsinstellungen.
- Ausgabe
- Live-Vorblick und kopierbare CSS Hintergrunderklärung.
- Reale Einschränkungen
- Browser-Rendering kann sich leicht nach Motor unterscheiden, und das Tool beurteilt keinen Kontrast oder garantiert Unterstützung in der Erbe-Browsers.
- Datenschutz und Datenverarbeitung
- Gradient-Typ, Farbstoppungen, Positionen, Ecke und Wiederholungsinstellungen werden in dieser Browser-Tabelle verarbeitet. Converter 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.
Wie man dieses Tool verwendet
- Bereitstellung von Gradient-Typ, Farbstopp, Positionen, Ecke und Wiederholung Einstellungen in den Tool-Kontrollen.
- Wählen Sie die Einstellungen aus, die einen Live-Vorblick und eine kopierbare CSS-Fundertrag beeinflussen, und führen Sie das Tool aus.
- Überprüfen Sie eine Live-Vorsicht und kopierbare CSS Hintergrunderklärung, bevor Sie sie kopieren oder herunterladen.
Einheitliche Versagenmodes
Eine fehlende Farbstop, unfähige Farbe oder eine nicht kompatible Position verhindert, dass eine gültige CSS-Erklärung erstellt wird.
nützliches Beispiel
Erstellen Sie einen 90 Grad linearen Gradient von #111827 bei 0 % bis #f59e0b bei 100% und kopieren Sie die Erklärung.