Kostenloser CSS-Verlaufsgenerator

Verwenden Sie eine Verlaufsfunktion als Hintergrund, zum Beispiel background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Hier wählen Sie Typ, Winkel und Stopps, und das Tool schreibt Ihnen diese Zeile zum Kopieren in Ihr Stylesheet.

90deg verläuft von links nach rechts. 0deg verläuft von unten nach oben, 180deg von oben nach unten und 270deg von rechts nach links. Der Standard ist hier 135deg, von links oben nach rechts unten. Sie können jede beliebige Zahl eingeben, auch negative Werte.

Geben Sie in das Textfeld eines Stopps eine transparente Farbe ein, etwa rgba(255,255,255,0) für ein Ausblenden zu durchsichtigem Weiß oder rgba(0,0,0,0) für durchsichtiges Schwarz. Der Code übernimmt sie unverändert. Die Farbauswahl kann Transparenz nicht darstellen und zeigt stattdessen Schwarz an.

Linear mischt Farben entlang einer Geraden in einem bestimmten Winkel. Radial verteilt sie von einem Mittelpunkt nach außen. Konisch führt sie wie ein Uhrzeiger um eine Mitte herum, was sich für Kreisdiagramme und Farbkreise eignet. Dieses Tool zeichnet radiale Verläufe als zentrierten Kreis.

Im Tool noch nicht, da die radiale Ausgabe immer radial-gradient(circle, ...) von der Mitte aus ist. Bearbeiten Sie den Code nach dem Kopieren: Ändern Sie circle in ellipse oder schreiben Sie circle at 30% 20%, um die Mitte zu verschieben. Die Stopps bleiben gleich.

Nein. Alle aktuellen Browser unterstützen lineare und radiale Verläufe ohne Präfix, und konische Verläufe funktionieren ab Chrome 69, Safari 12.1 und Firefox 83. Dieses Tool fügt nie Präfixe hinzu, die kopierte Zeile enthält also ausschließlich die Standardsyntax.

Setzen Sie zwei Stopps an dieselbe Position. Zum Beispiel ergibt #000000 bei 50 % und #ffffff bei 50 % eine scharfe Linie statt eines weichen Übergangs. Fügen Sie weitere Paare hinzu, um Streifen zu erzeugen. Der Code sortiert die Stopps nach Position, und Stopps an derselben Stelle behalten die Reihenfolge, in der Sie sie hinzugefügt haben.

Es gibt keine Begrenzung. „Stopp hinzufügen“ setzt einen neuen Stopp in die Mitte zwischen dem ersten und dem zuletzt hinzugefügten Stopp. Ziehen Sie daher jeden neuen Stopp an die gewünschte Stelle. Sie können Stopps entfernen, bis zwei übrig sind.

Das Tool gibt reines CSS aus, keine Tailwind-Klassen. Fügen Sie den Verlauf als beliebigen Wert ein, mit Unterstrichen statt Leerzeichen, etwa bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], oder nehmen Sie ihn als Hintergrundbild in Ihr Theme auf.

Dieses Tool erzeugt Hintergrundverläufe, Sie können den Code aber auch für Text verwenden. Setzen Sie die kopierte background-Zeile auf das Textelement und ergänzen Sie background-clip: text, -webkit-background-clip: text und color: transparent, damit der Verlauf durch die Buchstaben scheint.

Ja. Er ist kostenlos, ohne Konto und ohne Nutzungslimit. Ihre Farben und Einstellungen bleiben in Ihrem Browser und werden nicht gespeichert, ein Neuladen beginnt also von vorn. Auf der Live-Seite zählt Google Analytics die Klicks auf „CSS kopieren“, niemals den Verlauf selbst.