CSS-Farbverlauf-Generator

So funktioniert es

1. Beginnen Sie mit einer Vorlage oder dem Standardverlauf.
2. Klicken Sie auf den Balken, um Farben hinzuzufügen; ziehen Sie die Stopps, um sie zu verschieben.
3. Wählen Sie Linear, Radial oder Konisch und passen Sie Winkel oder Mittelpunkt an.
4. Kopieren Sie die CSS-Deklaration oder die Tailwind-Klasse.

Optionen erklärt

Linear

Die Farben ändern sich entlang einer geraden Linie. 0° zeigt nach oben, 90° nach rechts und 180° nach unten.

Radial

Die Farben breiten sich von einem Mittelpunkt aus – als Kreis oder als Ellipse, die an das Element angepasst ist.

Konisch

Die Farben laufen wie bei einem Farbkreis oder Tortendiagramm um einen Mittelpunkt herum.

Wiederholen

Wiederholt das Muster; setzen Sie die Stopps in einen kurzen Bereich, etwa 0 % bis 10 %, um Streifen zu erzeugen.

So sieht der erzeugte Code aus

Dieselben zwei Farben, geschrieben von jedem Typ. Farbstopps werden immer mit einer Prozentposition geschrieben:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Die Tailwind-Version verpackt denselben Wert in eine Klasse mit beliebigem Wert. Leerzeichen werden zu Unterstrichen, und die Leerzeichen nach Kommas entfallen:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

In der letzten CSS-Zeile wiederholt sich das Muster alle 10 % des Elements, was dünne Streifen ergibt. Bei Kegelverläufen ist der Winkel der Punkt, an dem der Verlauf beginnt, und bei radialen Verläufen sind die beiden Prozentwerte der Mittelpunkt.

Häufig gestellte Fragen

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.