Mesh-Gradient-Generator
Erstelle fließende Mesh-Gradients mit WebGL – Export als CSS oder Bild
Mesh-Gradient
5 PunkteFarben
Verzerrung
Filter
So funktioniert der Mesh-Gradient-Generator
Erstelle fließende Mesh-Gradients mit WebGL. Platziere Farbpunkte, lass sie weich ineinanderfließen und exportiere das Ergebnis als CSS oder hochauflösendes Bild.
WebGL-Rendering
Mesh-Gradients werden mit WebGL gerendert – so verschmelzen mehrere Farbpunkte weich und performant. Das Ergebnis wirkt fließend und organisch, was mit normalen CSS-Verläufen nicht möglich ist.
Farbpunkte verschieben
Platziere Farbpunkte per Ziehen an beliebiger Stelle auf der Arbeitsfläche. Jeder Punkt strahlt seine Farbe nach außen ab und verschmilzt weich mit seinen Nachbarn – so entstehen natürliche Übergänge.
Als Bild exportieren
Lade den Mesh-Gradient als hochauflösendes PNG herunter. Nutze ihn als Hero-Hintergrund, Social-Media-Grafik oder Design-Asset in jedem beliebigen Tool.
CSS-Hintergrund
Exportiere den Verlauf als CSS-Hintergrund, der den Mesh-Effekt mit übereinanderliegenden radialen Verläufen nachbildet. Füge ihn in dein Stylesheet ein – für eine schlanke Version in reinem CSS.
Häufig gestellte Fragen
Ein Mesh-Gradient mischt mehrere Farben aus Punkten, die über eine Fläche verteilt sind, und erzeugt so weiche, organische Übergänge. Anders als lineare oder radiale Verläufe, die einer einzigen Richtung folgen, fließt ein Mesh-Gradient natürlich zwischen beliebig vielen Farbpunkten.
Native Mesh-Gradients gibt es in CSS noch nicht. Dieses Tool erzeugt eine Annäherung aus übereinanderliegenden radialen Verläufen, die dem Look sehr nahekommt. Für pixelgenaue Ergebnisse exportierst du ein PNG und nutzt es als Hintergrund.
So viele, wie du brauchst. Jeder Punkt verschmilzt mit seinen Nachbarn. Wenige Punkte ergeben breite, einfache Verläufe, mehr Punkte ermöglichen komplexe, detailreiche Farbfelder.
Die Arbeitsfläche nutzt WebGL für echte Mesh-Interpolation, der CSS-Export nähert das nur mit überlappenden radialen Verläufen an. Das Ergebnis ist ähnlich, aber nicht identisch – wenn es auf Genauigkeit ankommt, nimm lieber den PNG-Export.