CSS-Verlaufsgenerator

Was ist ein CSS-Verlaufsgenerator?#

Ein CSS-Verlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, den der Browser entlang einer Linie, eines Strahls oder um einen Winkel malt. Gut eingesetzt kann ein einzelner Verlauf ein 200-Kilobyte-Hintergrundbild ersetzen — er skaliert auf jede Größe, bleibt auf jedem Bildschirm scharf und wird in einer Zeile CSS ausgeliefert. Das Schwierige ist nicht, die Syntax zu schreiben, sondern das Ergebnis zu sehen, während Sie Farben, Winkel und Farbpunkte anpassen.

Diese Seite ist eine Live-Werkbank dafür. Sie ziehen Farbpunkte, schieben den Winkel, schalten zwischen fünf Verlaufsarten und die Seite gibt die exakte linear-gradient(...)- (oder radial-, conic-, wiederholende-) Deklaration aus, die Ihr Stylesheet braucht — plus einen einfügbaren Tailwind v4-@theme-Schnipsel, der jede Farbe zu einem wiederverwendbaren Token macht.

Verwendung#

1. Wählen Sie einen Verlaufstyp:
   • Linear — Farbübergang entlang einer geraden Linie in einem gewählten Winkel. Der Standard; deckt die meisten Anwendungsfälle ab.
   • Radial — Farben strahlen von einem Mittelpunkt nach außen. Gut für Spotlights und Vignetten.
   • Konisch — Farben fegen um ein Zentrum wie in einem Tortendiagramm. Nützlich für Farbräder und Spinner-Hintergründe.
   • Linear wiederholt / Radial wiederholt — derselbe Verlauf gekachelt, was Streifen oder konzentrische Ringe erzeugt.
2. Ziehen Sie bei linearen und konischen Typen den Regler Winkel (0–359°). Die Vorschau aktualisiert sich live; 0° zeigt nach oben, 90° nach rechts, 135° ist die klassische Diagonale von oben-links nach unten-rechts.
3. Wählen Sie bei radialen Typen eine Form — Kreis oder Ellipse (der Standard für responsiv vollflächige Hintergründe).
4. Verwalten Sie Ihre Farbpunkte:
   • Jeder Farbpunkt hat ein Farbfeld und eine Position auf der Verlaufsleiste (0–100 %).
   • Ziehen Sie die Griffe auf der Leiste, um einen Farbpunkt zu verschieben, oder tippen Sie eine präzise Position.
   • Klicken Sie auf Farbpunkt hinzufügen, um einen neuen einzufügen; klicken Sie auf das × eines Farbpunkts, um ihn zu löschen.
   • Ein Verlauf braucht mindestens zwei Farbpunkte.
5. Lesen Sie die beiden Ausgaben am unteren Rand: CSS (der rohe Verlaufswert) und Tailwind v4 (ein @theme-Block, der jede Farbe als --color-grad-*-Token registriert, plus eine .bg-gradient-Utility, die sie verbraucht). Verwenden Sie die Kopier-Schaltfläche neben jeder Ausgabe.

Hauptfunktionen#

• Fünf Verlaufsarten in einem Werkzeug. Linear, radial, konisch und beide wiederholenden Varianten — umschalten, ohne Farben neu einzugeben.
• Live, pixelgenaue Vorschau. Der große Block rechts ist der tatsächliche Verlauf, den Sie ausliefern werden; was Sie sehen, ist das, was Ihr Stylesheet erhält.
• Zieh-Griff-Verlaufsleiste. Jeden Farbpunkt durch Ziehen neu positionieren; der Prozentsatz aktualisiert sich beim Bewegen.
• Duale Ausgabe. Roher CSS-Code für handgeschriebene Stylesheets und ein Tailwind-v4-@theme-Schnipsel (jeder Farbpunkt wird ein --color-grad-*-Token, verbraucht von einer .bg-gradient-Utility) für Utility-first-Projekte — beide stets synchron.
• Winkel-Anzeige. Der exakte Grad steht neben dem Regler, sodass Sie einen Verlauf woanders präzise reproduzieren können.
• Kein Upload. Farben, Farbpunkte und Winkel verlassen nie den Browser.

Ausführliches Beispiel#

Angenommen, Sie wollen einen ruhigen, leicht diagonalen Marken-Verlauf von Indigo nach Teal. Wählen Sie Linear, setzen Sie den Winkel auf 135° und verwenden Sie zwei Farbpunkte:

• Farbpunkt 1: #4F46E5 bei 0% (Indigo)
• Farbpunkt 2: #0D9488 bei 100% (Teal)

Die CSS-Ausgabe ist:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

und der Tailwind-v4-Schnipsel ist:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Anstatt die Hex-Werte zu inlinen, registriert die Tailwind-Ausgabe jeden Farbpunkt als --color-grad-*-Design-Token innerhalb von @theme und verweist dann über var(...) einer einzelnen .bg-gradient-Utility darauf. Ändern Sie eine Variable und jede Stelle, die sie verbraucht, aktualisiert sich auf einmal. Wollen Sie eine dritte, weichere Farbe in der Mitte? Klicken Sie auf Farbpunkt hinzufügen, setzen Sie #7C3AED auf 50%, und der Schnipsel wächst um ein --color-grad-2: #7C3AED-Token, während das Teal zu --color-grad-3 rutscht — die Farbpunkte werden stets nach Position neu nummeriert, sodass die Namen nie mit der Leiste aus dem Takt geraten.

FAQ#

Was ist der Unterschied zwischen linear, radial und konisch?#

Linear geht entlang einer durch einen Winkel definierten geraden Linie über. Radial geht von einem Punkt nach außen über und erzeugt einen Kreis oder eine Ellipse aus Farbe. Konisch geht um einen Punkt herum über — stellen Sie sich ein rotierendes Farbrad vor, bei dem jeder Winkel ein anderer Farbton ist. Die wiederholenden Varianten kacheln das Muster, um Streifen oder Ringe zu erzeugen.

Warum definiert die Tailwind-Ausgabe --color-grad-*-Variablen statt die Farben zu inlinen?#

Tailwind v4 hat die Konfiguration über den @theme-Block nach CSS verschoben, wo jeder Eintrag ein wiederverwendbares Design-Token wird. Indem jeder Farbpunkt als --color-grad-1, --color-grad-2, … ausgegeben und .bg-gradient über var(...) darauf verwiesen wird, liefert der Schnipsel eine Palette, die Sie überall wiederverwenden können — Rahmen, Text, Schatten — nicht nur diesen einen Hintergrund. Editieren Sie eine Variable und jeder Verbraucher aktualisiert sich auf einmal. (Auf Tailwind v3 gibt es kein @theme; fügen Sie die CSS-Ausgabe stattdessen in Ihr Stylesheet ein.)

Kann ich einen harten Farbsprung statt eines sanften Übergangs erzeugen?#

Ja. Geben Sie zwei Farbpunkten dieselbe Position — zum Beispiel #000 50% und #fff 50%. Ohne Abstand dazwischen hat der Übergang die Breite null, sodass er zu einer harten Linie wird. So bauen Sie gestreifte oder gebänderte Hintergründe ohne Bild.

Der konische Verlauf wirkt im Vergleich zu meinem Design-Tool gedreht. Warum?#

Verschiedene Tools messen den Startwinkel eines konischen Verlaufs unterschiedlich. CSS misst den from-Winkel im Uhrzeigersinn ab Oben (12 Uhr). Wenn Ihr Design-Tool ab Rechts (3 Uhr) oder gegen den Uhrzeigersinn misst, subtrahieren oder addieren Sie 90° (oder drehen Sie das Vorzeichen um), bis die Vorschau passt.