Farbverlauf-CSS-Generator
Erstelle einen zweifarbigen CSS-Farbverlauf und kopiere den Code sofort.
Dieses Tool läuft vollständig in deinem Browser. Deine Dateien werden niemals auf einen Server hochgeladen.
background: linear-gradient(90deg, #3b82f6, #a855f7);
Was dieses Tool macht
Erstellt einen CSS-linear-gradient()-Hintergrund aus zwei von dir gewählten Farben und einem Winkel, mit einer Live-Vorschau und dem einsatzbereiten CSS-Code.
So wird es verwendet
Wähle Farbe A und Farbe B über die Farbeingaben und lege den Winkel in Grad fest. Die Verlaufsvorschau und der CSS-Code darunter aktualisieren sich sofort, sobald du einen Wert änderst; klicke auf das Kopiersymbol, um das CSS zu kopieren.
Durchgerechnetes Beispiel
Bei den Standardwerten #3b82f6 (Blau), #a855f7 (Violett) und einem Winkel von 90° erzeugt das Tool background: linear-gradient(90deg, #3b82f6, #a855f7); — ein Verlauf, der von links nach rechts verläuft, da 90deg die Verlaufslinie im CSS-Winkelsystem nach rechts ausrichtet.
Wie Verlaufswinkel funktionieren
In CSS zeigt 0deg den Verlauf von unten nach oben, und der Winkel nimmt im Uhrzeigersinn zu, sodass 90deg von links nach rechts, 180deg von oben nach unten und 270deg von rechts nach links verläuft. Das unterscheidet sich von einer Kompass- oder Standard-Mathe-Winkelkonvention, was beim manuellen Schreiben von Verläufen häufig für Verwirrung sorgt.
Grenzen
Dieses Tool erzeugt nur einen einfachen zweifarbigen linearen Verlauf — es unterstützt keine radialen oder konischen Verläufe, mehr als zwei Farbstopps oder benutzerdefinierte Stopppositionen, wie eine Farbe bei 20 % statt gleichmäßiger Aufteilung. Für Verläufe darüber hinaus kopiere den erzeugten CSS-Code als Ausgangspunkt und bearbeite die linear-gradient()-Funktion manuell, um weitere Stopps hinzuzufügen.
Umfang, Quellen und Datenschutz
Die CSS-Funktion linear-gradient() ist Teil der CSS-Images-Spezifikation und wird von allen modernen Browsern unterstützt. Der Verlauf wird vollständig in deinem Browser berechnet und gerendert; die von dir gewählten Farben werden nie hochgeladen.
Häufig gestellte Fragen
- Welche Verlaufstypen unterstützt das Tool?
- Aktuell lineare Farbverläufe mit einstellbarem Winkel — der gängigste Typ für Hintergründe, Buttons und Hero-Bereiche.
- Kann ich mehr als zwei Farben verwenden?
- Dieses Tool unterstützt zwei Farben für einen sauberen, einfachen Verlauf — du kannst den erzeugten CSS-Code bei Bedarf manuell um weitere Farbstopps erweitern.
- Funktioniert das in allen Browsern?
- Ja, die CSS-Funktion linear-gradient() wird von allen modernen Browsern unterstützt.