Zum Inhalt springen
Design & Farbe

CSS-Verlaufsgenerator

Mischen Sie unbegrenzte Farbstopps und kopieren Sie die Hintergrundregel.

Läuft in Ihrem Browser100 % privatKeine Uploads
Tool wird geladen…

Teilen Sie dieses Tool

Schicken Sie es an jemanden, der es braucht.

Xfin
Lesen Sie den vollständigen Leitfaden

Über den CSS-Verlaufsgenerator

Erstellen Sie visuell einen Farbverlauf, von einer einfachen zweifarbigen Überblendung bis hin zu einem Netz mit mehreren Stopps. Zeigen Sie eine Vorschau auf einem Live-Panel an, passen Sie den Winkel oder die Form an und kopieren Sie das CSS oder einen Tailwind-kompatiblen beliebigen Wert.

Wie man es benutzt

  1. 1Wählen Sie einen VerlaufstypLinear, radial oder konisch, mit Winkelsteuerung für lineare Steigungen.
  2. 2Fügen Sie Farbstopps hinzuWählen Sie jede Farbe und ihre Position aus. Fügen Sie so viele Stopps hinzu, wie das Design erfordert.
  3. 3Kopieren Sie das CSSKopieren Sie die Hintergrunddeklaration oder die generierte Tailwind-Klasse in Ihr Stylesheet.

Warum diesen css-verlaufsgenerator verwenden?

  • Nichts verlässt Ihr Gerät. Die Arbeit geschieht in Ihrem Browser-Tab. In dieser App gibt es keinen Upload-Endpunkt, sodass Ihre Dateien und Texte von uns nicht gespeichert, protokolliert oder eingesehen werden können.
  • Keine Upload-Wartezeit. Sie überspringen den Hin- und Rückweg zu einem Server vollständig. Die Ergebnisse werden durch Ihre eigene CPU begrenzt, nicht durch die Netzwerkgeschwindigkeit oder die Warteschlangengröße.
  • Kostenlos, kein Konto, keine Kontingente. Keine Anmeldewand, kein Wasserzeichen, kein Tageslimit. Optionale Konten existieren nur, um Favoriten und Voreinstellungen geräteübergreifend zu speichern.

Häufig gestellte Fragen

Ist die Verwendung meines Farbverlaufs hier sicher?

Ja. Dieses Tool läuft vollständig in Ihrem Browser und verwendet JavaScript. Nichts, was Sie einfügen oder öffnen, wird an einen Server gesendet und die Seite behält keine Kopie, nachdem Sie sie geschlossen haben.

Muss ich ein Konto erstellen?

Nein. Jedes Tool ist ohne Anmeldung vollständig nutzbar. Ein Konto fügt nur gespeicherte Favoriten und wiederverwendbare Voreinstellungen hinzu.

Funktioniert es auf einem Telefon?

Ja. Die Benutzeroberfläche ist „Mobile First“ mit großen Touch-Zielen und einem gestapelten Layout, sodass sie sowohl auf Telefonen und Tablets als auch auf Desktops funktioniert.

Sollte ich eine Ersatzhintergrundfarbe hinzufügen?

Ja. Deklarieren Sie zunächst eine feste Hintergrundfarbe, damit ältere Browser und kontrastreiche Modi immer noch eine nutzbare Oberfläche anzeigen, und legen Sie dann den Farbverlauf darüber.

Wie halte ich Text in einem Farbverlauf lesbar?

Überprüfen Sie den Kontrast an beiden Enden des Farbverlaufs, nicht nur den Durchschnitt. Eine subtile dunkle Überlagerung oder ein einfarbiges Textfeld ist oft sicherer, als sich auf den Farbverlauf selbst zu verlassen.

Weitere kostenlose Dienstprogramme aus derselben Ecke der Toolbox.