Warum hat mein Verlauf in der Mitte einen stumpfen Streifen?

Zwei weit auseinanderliegende Farbtöne, die direkt gemischt werden, laufen unterwegs durch Grau. Ein dritter Stopp auf halber Strecke, in der Farbe, die dort erscheinen soll, lenkt die Mischung daran vorbei.

Soll ich einen CSS-Verlauf oder ein Bild verwenden?

CSS, für alles, was sich als Verlauf ausdrücken lässt. Es ist kleiner, skaliert perfekt und lässt sich bearbeiten. Greif nur dann zu einem Bild, wenn die Grafik wirklich komplexer ist, als es die Verlaufssyntax beschreiben kann.

Wie verwende ich den Verlauf in Tailwind CSS?

Nimm einen beliebigen Hintergrundwert (arbitrary value): Kopiere den Verlauf und ersetze Leerzeichen durch Unterstriche, zum Beispiel bg-[linear-gradient(90deg,#ff7a59_0%,#6544c9_100%)]. Einen Verlauf, den du mehrfach brauchst, trägst du unter backgroundImage in dein Tailwind-Theme ein.

CSS-Farbverlauf-Generator online

Gestalte einen Farbverlauf visuell und kopiere einsatzfertiges CSS dafür, mit mehreren Stopps und Winkeln. Was die Vorschau zeigt, ist genau das, was die Regel darstellt.

Browser-Tool

Erzeugter Code

.gradient {
  background-color: #6544c9;
  background-image: linear-gradient(135deg, #6544c9 0%, #ff9276 100%);
}

Dateiname

.css

Über CSS-Farbverlauf-Generator

Gestalte eine Farbmischung visuell und nimm die Stylesheet-Regel dahinter mit, damit der Browser sie in jeder Größe neu zeichnet, die das Element am Ende hat, statt ein flaches Bild zu skalieren. Kostenlos, online und ohne Konto oder Anmeldung zugänglich. Die Regel wird innerhalb der Seite erzeugt, es wird also nichts hochgeladen und nichts kommt mit Wasserzeichen an.

So nutzt du CSS-Farbverlauf-Generator

Farbstopps hinzufügenJeder hat eine Farbe und eine Position entlang der Verlaufslinie.
Linear oder radial wählen und den Winkel einstellenBeides siehst du in der Vorschau, während du es änderst, auch den Winkel, in dem der Verlauf läuft.
Die Regel kopierenFertig für eine background-Eigenschaft. Was die Vorschau zeigt, stellt die Regel auch dar.

Warum CSS hier besser ist als ein exportiertes Bild

Als Regel geschrieben kostet ein Verlauf ein paar Dutzend Bytes, wird in jeder Elementgröße scharf neu gezeichnet und ändert sich, wenn du eine Zeile bearbeitest. Als Bild exportiert wird er zu einem Download mit fester Auflösung und zu einer zweiten Datei, die mit dem Design Schritt halten muss. Bei einer flachen Farbmischung gewinnt das Bild nichts.

Was das Tool nicht kann

Bei großen, feinen Verläufen tritt Banding auf, besonders in dunklen Tönen. Das ist eine Grenze von Acht-Bit-Farbe, nicht von CSS.
Standardmäßig wird in sRGB interpoliert, zwei weit auseinanderliegende Farbtöne laufen also durch eine entsättigte Mitte. Ein Stopp in der Mitte lenkt den Verlauf um.

CSS-Farbverlauf-Generator: häufige Fragen

Warum hat mein Verlauf in der Mitte einen stumpfen Streifen?: Zwei weit auseinanderliegende Farbtöne, die direkt gemischt werden, laufen unterwegs durch Grau. Ein dritter Stopp auf halber Strecke, in der Farbe, die dort erscheinen soll, lenkt die Mischung daran vorbei.
Soll ich einen CSS-Verlauf oder ein Bild verwenden?: CSS, für alles, was sich als Verlauf ausdrücken lässt. Es ist kleiner, skaliert perfekt und lässt sich bearbeiten. Greif nur dann zu einem Bild, wenn die Grafik wirklich komplexer ist, als es die Verlaufssyntax beschreiben kann.
Wie verwende ich den Verlauf in Tailwind CSS?: Nimm einen beliebigen Hintergrundwert (arbitrary value): Kopiere den Verlauf und ersetze Leerzeichen durch Unterstriche, zum Beispiel bg-[linear-gradient(90deg,#ff7a59_0%,#6544c9_100%)]. Einen Verlauf, den du mehrfach brauchst, trägst du unter backgroundImage in dein Tailwind-Theme ein.

Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.

Die Tools, die man zusammen mit CSS-Farbverlauf-Generator am häufigsten braucht.

Du findest das passende Tool nicht?

Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.

Tool vorschlagen →