Mesh-Gradient-Generator
Erzeugen Sie direkt im Canvas einen farbigen Mesh-Verlauf mit mehreren Farbpunkten, ohne ein Bild importieren zu müssen. Passen Sie Anzahl und Farben der Punkte an und exportieren Sie das Ergebnis als PNG oder kopieren Sie das entsprechende CSS.
So funktioniert es
Jeder Farbpunkt wirkt als Einflussquelle: Für jedes Pixel des Canvas ist die endgültige Farbe ein gewichteter Mittelwert der Farben aller Punkte, wobei die Gewichtung umso stärker ist, je näher der Punkt liegt (Gewichtung nach inverser Distanz). So entsteht ein fließender, organischer Verlauf zwischen den gewählten Farben.
Liefert das kopierte CSS genau dasselbe Ergebnis wie das PNG?
Nein, das erzeugte CSS verwendet eine Überlagerung nativer radialer CSS-Verläufe. Das Ergebnis ist ähnlich, aber nicht pixelgenau identisch mit der im Canvas berechneten Interpolation nach inverser Distanz. Es ist eine leichte, aber treffende Annäherung, die sich direkt als Hintergrund auf einer Website verwenden lässt.
Warum ändert sich das Ergebnis bei jedem Klick auf „Zufällige Positionen“?
Die Positionen der Punkte werden bei jeder Erzeugung zufällig innerhalb der Grenzen des Canvas gewählt. Zusammen mit den von Ihnen gewählten Farben können Sie so schnell viele Varianten von Mesh-Verläufen ausprobieren, ohne die Punkte von Hand zu platzieren.
Die gesamte Darstellung wird lokal in Ihrem Browser berechnet: Es werden keine Daten an einen Server gesendet, auch dann nicht, wenn Sie kein Bild angeben.