Ziehe Farbpunkte über eine Zeichenfläche, um einen weichen Mesh-Gradienten zu bauen, und kopiere dann reines CSS aus gestapelten radialen Verläufen oder lade ein PNG herunter. Kostenlos, in deinem Browser.
Mesh-Gradient-Generator
Ein Mesh-Gradient mischt mehrere Farbpunkte über eine Fläche, statt entlang einer Linie zu verlaufen. Im Web kannst du ihn mit reinem CSS nachbilden, indem du pro Punkt einen radial-gradient über eine Grundfarbe legst. Ziehe die Punkte unten, lege Farbe und Reichweite fest und kopiere dann das CSS oder speichere ein PNG.
Welches Verlaufstool zu welcher Aufgabe passt
Du willst
Nutze
Ausgabe
Einen ruhigen, weichen Blob-Hintergrund ohne Script
Diesen Mesh-Generator
CSS oder PNG
Einen sich langsam bewegenden Hintergrund
Shader-Gradient-Generator
WebGL-Komponente
Einen linearen, radialen oder konischen Verlauf mit zwei bis fünf Stopps
CSS-Gradient-Generator
Eine Verlaufszeile
Jeder Punkt wird hier zu einem eigenen radialen Verlauf, der über eine Grundfarbe gemalt wird. Weil das Ergebnis normales CSS ist, kostet es keinen Download, braucht kein JavaScript auf deiner Website und skaliert ohne Unschärfe auf jede Boxgröße.
Wähle eine Vorlage oder behalte die Standardeinstellung und ziehe dann einen beliebigen nummerierten Griff auf der Fläche, um diese Farbe zu verschieben.
Mit der Tastatur kannst du einen Griff fokussieren und ihn mit den Pfeiltasten verschieben oder exakte X- und Y-Werte in der Punktliste eingeben.
Ändere Farbe und Reichweite eines Punkts. Die Reichweite ist die Stelle, an der die Farbe vollständig durchsichtig wird, gemessen als Anteil der Strecke vom Punkt zur entferntesten Ecke der Box.
Füge bis zu acht Punkte hinzu oder entferne überzählige und kopiere dann das CSS oder lade die Fläche als PNG in der gewünschten Größe herunter.
Drei bis fünf Punkte wirken meist satter als acht. Mehr Ebenen machen die Mitte vor allem matschig.
Wähle eine Grundfarbe nahe dem hellsten Punkt für einen Pastell-Look oder eine sehr dunkle für einen leuchtenden Nacht-Stil.
Setze Überschriften über den ruhigsten Bereich und prüfe ihren Kontrast an den hellsten und dunkelsten Stellen, die sie überdecken.
Das PNG ist praktisch für E-Mails und Social-Media-Bilder, wo ein CSS-Hintergrund nicht mit dem Design mitreist.
Häufige Fragen
Ist das ein echter Mesh-Gradient?
Design-Apps wie Vektor-Editoren bauen echte Meshes aus einem Raster von Flächenstücken. CSS hat keine Mesh-Funktion, deshalb legt dieses Tool radiale Verläufe übereinander, was für Hintergründe und Hero-Bereiche denselben weichen, mehrfarbigen Eindruck ergibt.
Was unterscheidet das vom Shader-Gradient-Generator?
Das Shader-Tool zeichnet einen animierten Verlauf mit WebGL und exportiert eine Komponente, die ein Script ausführt. Dieses hier erzeugt ein ruhendes Bild nur aus CSS, es wird also sofort gerendert, lässt sich drucken und funktioniert auch dort, wo Scripts blockiert sind.
Warum blendet jede Farbe zu einer transparenten Version ihrer selbst aus?
Ein Ausblenden zum Schlüsselwort transparent kann den Rand in manchen Interpolationsmodi ins Graue färben. Wenn jede Ebene mit denselben Rot-, Grün- und Blauwerten bei Alpha null endet, bleibt der Rand sauber.
Kann ich das CSS in Tailwind verwenden?
Ja. Lege die Deklarationen in eine Klasse in deinem Stylesheet oder füge den background-image-Wert in eine Arbitrary Property wie [background-image:...] ein, wenn du ihn lieber inline behältst.
Entspricht das PNG genau dem CSS?
Fast. Der Download wird auf einer Zeichenfläche mit denselben Punkten, Farben und Reichweiten gezeichnet, aber Browser glätten Canvas-Verläufe womöglich etwas anders als CSS-Verläufe.
Wie gestapelte radiale Verläufe ein Mesh ergeben
background-image akzeptiert eine kommagetrennte Liste, und die zuerst aufgeführte Ebene wird obenauf gemalt. Jede Ebene ist hier ein Kreis um einen Punkt, in der Mitte deckend und an seiner Reichweite durchsichtig, sodass sich benachbarte Farben überlagern und mischen.
Es ist kein Größen-Schlüsselwort angegeben, also nutzt jeder Kreis die Standardgröße farthest-corner, und die Prozentwerte der Stopps skalieren mit der Box. Ein Punkt nahe der Mitte breitet sich deshalb weniger aus als einer in einer Ecke mit derselben Reichweite, und ein breites Banner macht jeden Kreis größer. Prüfe die Vorschau also im Seitenverhältnis, das du wirklich nutzt.
Damit es gut aussieht
Wähle Farben, die auf dem Farbkreis nah beieinander liegen, für ruhige Ergebnisse, und füge einen einzelnen kontrastierenden Punkt für Energie hinzu. Ziehe Punkte teilweise über den Rand hinaus, um anzudeuten, dass die Farbe jenseits des Rahmens weitergeht.
Wenn du bei großen dunklen Verläufen sichtbare Streifen siehst, füge ein dezentes Rauschtextur-Bild als zusätzliche Ebene hinzu oder hell die Grundfarbe etwas auf.
Das CSS hinter einem Mesh
Das ist die Vorlage Hafen, von Hand ausgeschrieben. Ändere einen beliebigen Wert, und das Ergebnis im Frame aktualisiert sich.
Vier Punkte über einer hellen Grundfarbe
Jeder radial-gradient ist ein Farbpunkt. Zuerst aufgeführte Ebenen liegen über den nachfolgenden.
Was jede Einstellung steuert
Einstellungen und das CSS, das sie erzeugen
Einstellung
CSS-Teil
Wirkung
Position des Punkts
circle at X% Y%
Wo die Farbe am stärksten ist
Farbe des Punkts
erster Farbstopp
Der Farbton an dieser Stelle
Reichweite
zweiter Stopp, z. B. 55%
Anteil der Strecke zur entferntesten Ecke, an dem die Farbe vollständig durchsichtig ist
Grundfarbe
Was dort sichtbar ist, wo kein Punkt hinreicht
Reihenfolge der Punkte
Reihenfolge der Ebenen
Frühere Punkte überdecken spätere, wo sie sich überlagern
Hafen
Aprikose
Nachtschicht
Wiese
Mesh-Gradient-Editor
Ziehe nummerierte Farbpunkte auf der Fläche, lege Farbe und Reichweite fest und kopiere dann das CSS oder lade ein PNG herunter. Vorlagen: Hafen, Aprikose, Nachtschicht, Wiese.
Vorlagen
Punkt {n} bei {x}% {y}%. Mit den Pfeiltasten verschieben.