So funktioniert es
- 1Verlaufsart wählen: linear, radial oder konisch.
- 2Farbstopps hinzufügen (Klick auf die Leiste), verschieben und Farbe sowie Deckkraft einstellen.
- 3Winkel, Form oder Mittelpunkt anpassen – oder eine Vorlage als Ausgangspunkt nehmen.
- 4CSS oder Tailwind-Klasse kopieren.
Linear, radial, konisch
linear-gradient() verläuft entlang eines Winkels, etwa 90deg von links nach rechts. radial-gradient() breitet sich kreis- oder ellipsenförmig von einem Mittelpunkt aus, conic-gradient() dreht sich um den Mittelpunkt – praktisch für Tortendiagramme oder Farbkreise. Alle drei Arten werden von allen aktuellen Browsern unterstützt.
Farbstopps und Transparenz
Jeder Farbstopp hat Farbe, Position in Prozent und Deckkraft. Zwei Stopps an derselben Position erzeugen eine harte Kante statt eines weichen Übergangs. Mit „Umkehren“ drehen Sie die Reihenfolge der Farben. Der erzeugte Code enthält zusätzlich eine einfarbige background-Zeile mit der ersten Farbe als Fallback.
Tailwind CSS
Für Tailwind-Projekte gibt das Tool den Verlauf als Arbitrary Value aus, z. B. bg-[linear-gradient(…)]. So nutzen Sie jeden beliebigen Verlauf direkt im Markup, ohne die Konfiguration zu erweitern.
Häufige Fragen
Wie erstelle ich einen Farbverlauf in CSS?
Mit background: linear-gradient(90deg, #ff7a18, #af002d); – Winkel und Farben passen Sie im Generator visuell an und kopieren den Code.
Wie mache ich einen Verlauf mit Transparenz?
Stellen Sie die Deckkraft eines Farbstopps unter 100 %. Der Code verwendet dann 8-stellige Hex-Farben (#RRGGBBAA), die alle aktuellen Browser verstehen.
Kann ich den Verlauf in Tailwind verwenden?
Ja, kopieren Sie die Tailwind-Ausgabe als Arbitrary Value und fügen Sie sie als Klasse ein.
Funktioniert conic-gradient in allen Browsern?
In allen aktuellen Versionen von Chrome, Edge, Firefox und Safari ja.
Mit den Ergebnissen nicht zufrieden?
Sprechen Sie mit Webin Agency über schnelle, SEO-freundliche Websites, E-Commerce und Google-Ads-Betreuung.