Mesh-Gradient-Generator

Mesh-Verläufe mit verschiebbaren Farbpunkten erstellen

Mesh-Verläufe mischen viele Farben in weichen, organischen Übergängen über eine Fläche. Sie sind zu einem festen Bestandteil von Hero-Hintergründen, App-Splashscreens und Musik-Covern geworden, weil sie reichhaltiger wirken als ein einfacher linearer Zweifarbverlauf. Mit diesem Mesh-Gradient-Generator platzieren Sie drei bis sechs farbige Punkte direkt auf der Zeichenfläche, ziehen sie an die gewünschte Position und sehen, wie sich die Mischung sofort aktualisiert.

So funktioniert es in reinem CSS

Browser unterstützen keine echten Mesh-Verläufe, aber Sie können sie annähern, indem Sie mehrere radial-gradient()-Hintergründe übereinanderlegen. Jede Ebene ist auf einen Ihrer Punkte zentriert und blendet von der Punktfarbe zu einer vollständig transparenten Version derselben Farbe über; alle Ebenen liegen über einer Basis-background-color. Die sich überlappenden Übergänge mischen die Farben weich, was den Mesh-Look ergibt. Das erzeugte CSS ist eine einzige Deklaration ohne Bilder – es lädt also sofort und skaliert auf jede Elementgröße.

Das Ausblenden zu rgba() mit Alpha null statt zum Schlüsselwort transparent vermeidet die grauen Säume, die in manchen Renderern auftreten können, und ermöglicht außerdem, denselben Verlauf für den PNG-Export exakt auf einem HTML-Canvas nachzubilden.

Unschärfe, Rauschen und Paletten

Der Unschärfe-Regler fügt ein CSS-filter: blur() für einen noch weicheren Look hinzu, und der Rausch-Regler legt eine SVG-Fractal-Noise-Textur darüber, die eine feine Körnung erzeugt und Farbstreifen auf großen Flächen reduziert. Die Schaltfläche „Random palette“ wählt einen harmonischen Satz von Farbtönen mit ausgewogener Sättigung und Helligkeit, und „Random layout“ ordnet zusätzlich die Punkte neu an. Wenn Sie zufrieden sind, kopieren Sie das CSS in Ihr Stylesheet oder laden Sie ein PNG mit 1600 × 900 Pixeln herunter. Alles wird lokal in Ihrem Browser erzeugt, und nichts wird hochgeladen.