CSS-Farbverlaufsgenerator
Erstellen Sie CSS-Code für lineare und radiale Farbverläufe mit anpassbaren Richtungen und Farben.
Tool ausführen
Mit diesem Online-Farbverlaufsgenerator erstellen Sie schnell passenden CSS-Code für lineare und kreisförmige Verläufe. Sie tragen dazu einfach den gewünschten Verlaufstyp, die Verlaufsrichtung sowie eine Liste von Farbwerten ein. Wenn Sie den linearen Typ wählen, übernimmt das Werkzeug Ihre angegebene Richtung direkt in die CSS-Regel. Bei jedem anderen Eintrag für den Typ erzeugt das System automatisch einen radialen Verlauf in Kreisform. Die einzelnen Farbwerte geben Sie durch Kommas getrennt an. Das Tool trennt die Eingaben an den Kommas, entfernt überflüssige Leerzeichen an den Rändern und fügt die bereinigten Farbwerte ordentlich zusammen. Sie können Hexadezimalcodes wie #ff7e5f, RGB-Werte, Farbnamen oder Farbstopps mit Prozentangaben wie #3498db 20% flexibel verwenden. Nach der Ausführung erhalten Sie die fertige CSS-Zeile, die Sie direkt in Ihr Stylesheet für Hintergründe oder UI-Elemente kopieren können. Alle drei Eingabefelder sind optional und mit praxistauglichen Standardwerten vorbefüllt.
Anleitung
- Wählen Sie im Feld für den Verlaufstyp die Option linear oder tragen Sie radial ein.
- Legen Sie im Richtungsfeld die Ausrichtung für lineare Verläufe fest, beispielsweise to right oder 45deg.
- Tragen Sie Ihre Farbwerte kommagetrennt in das Textfeld für Farben ein.
- Starten Sie die Erzeugung, um die fertige CSS-Gradient-Zeile im Ausgabebereich zu sehen und zu kopieren.
Beispiele
- Linearer Verlauf: Typ "linear", Richtung "to bottom", Farben "#1e3c72, #2a5298" ergibt "linear-gradient(to bottom, #1e3c72, #2a5298)".
- Kreisförmiger Verlauf: Typ "radial", Farben "crimson, gold" ergibt "radial-gradient(circle, crimson, gold)".
FAQ
Welche Verlaufstypen werden unterstützt?
Das Tool erzeugt bei der Eingabe von linear einen linearen Farbverlauf mit der angegebenen Richtung. Bei allen anderen Texteingaben für den Typ wird ein kreisförmiger radialer Verlauf erstellt.
Welche Farbformate kann ich verwenden?
Sie können alle gängigen CSS-Farbangaben nutzen, darunter HEX-Werte, RGB-, RGBA- oder HSL-Werte, Farbnamen sowie Farbstopps mit Prozentangaben, jeweils durch Kommas getrennt.
Was passiert, wenn Eingabefelder leer bleiben?
Nicht ausgefüllte Felder greifen auf voreingestellte Standardwerte zurück: linear für die Verlaufsart, to right für die Richtung und zwei Beispielfarbtöne.