Hilfe

Mesh Gradient Generator für CSS und SVG

Wähle 2 bis 8 Farben, und dieser Mesh Gradient Generator mischt sie zu einem weichen, glatten Hintergrund, den du über die Farbpunkte formst. Mit CSS kopieren bekommst du CSS, das in jedem modernen Browser läuft, mit SVG herunterladen eine Datei mit 1600 × 1200, die sich auf jede Größe skalieren lässt. Alles läuft in deinem Browser, ohne WebGL, Upload oder Konto.

Farbverlauf mit mehreren Farben gestalten

Schau dir die Vorschau an. Die kleinen runden Punkte darauf sind die Farbpunkte, einer für jede Farbfläche im Mesh.
Drücke Zufällig für eine neue zufällige Palette samt Anordnung, so oft du willst, bis etwas nah an deiner Idee liegt.
Öffne die Zeile Farben und klicke auf ein Farbfeld, um deine eigene Farbe zu wählen. Mit Farbe hinzufügen kommen weitere dazu (bis zu 8), mit dem kleinen x auf einem Farbfeld entfernst du eine (bis hinunter auf 2).
Bewege den Regler Komplexität zwischen 2 und 6, um die Zahl der Farbpunkte zu ändern.
Ziehe einen Punkt, um ihn zu verschieben, mit der Maus oder dem Finger. Mit der Tastatur wählst du einen Punkt aus und drückst die Pfeiltasten; mit Shift werden die Schritte größer.
Drücke CSS kopieren oder SVG herunterladen, wenn die Vorschau passt. Ein kurzer Hinweis, Kopiert oder Gespeichert, bestätigt es.

Die Vorschau aktualisiert sich bei jeder Änderung, und das Feld CSS-Code zeigt immer genau das CSS für das, was du siehst. Wenn du die Komplexität änderst oder auf „Zufällig“ drückst, werden die Punkte neu angeordnet, und von dir verschobene Punkte springen auf neue Positionen.

Was die Komplexität bewirkt

Die Komplexität erzeugt ein Raster aus Komplexität × Komplexität Farbpunkten, und jeder Punkt bekommt eine Farbe aus deiner Palette. Mehr Punkte ergeben ein abwechslungsreicheres Mesh mit kleineren Flächen, weniger Punkte breite, einfache Farbfelder.

Komplexität 2: 4 Farbpunkte, jede Fläche 65 % der Zeichenfläche
Komplexität 3: 9 Farbpunkte, 43 %
Komplexität 4: 16 Farbpunkte, 33 %
Komplexität 5: 25 Farbpunkte, 26 %
Komplexität 6: 36 Farbpunkte, 22 %

Ein Punkt, auf den du achten solltest: Die Farben werden auf die Punkte verteilt, deine Palette kann also mehr Farben haben, als das Mesh Punkte hat. Bei Komplexität 2 gibt es nur 4 Punkte, eine Palette mit 6 Farben zeigt dann höchstens 4 davon gleichzeitig. Erhöhe die Komplexität, damit auch die übrigen Farben auftauchen.

Mesh Gradient CSS zum Einfügen

Das Feld CSS-Code enthält zwei Angaben: eine background-color (der Durchschnitt deiner Palette, damit keine Ecke leer bleibt) und ein background-image, das pro Farbpunkt einen radial-gradient() übereinanderlegt. Das ist gewöhnliches CSS, ohne Bilddatei und ohne Skript.

Jede Ebene verläuft von einer vollen Farbe in der Mitte bis zu völliger Transparenz am Rand, und die Ebenen überlappen sich. Dadurch gehen die Farben ineinander über. Größe und Position sind Prozentwerte, der Verlauf passt sich also jedem Element an, auf das du ihn anwendest.

Mesh Gradient SVG: der Download

SVG herunterladen speichert die Datei mesh-farbverlauf.svg. Sie hat eine viewBox von 1600 × 1200, ein Grundrechteck in derselben Durchschnittsfarbe und pro Farbpunkt einen radialGradient. Als Vektorgrafik bleibt sie scharf, etwa als Handy-Hintergrund, Folienhintergrund oder Beitragsbild. In einem Rahmen, der nicht 4:3 ist, füllt sie den Rahmen und beschneidet die Ränder, statt zu strecken.

Brauchst du ein PNG, öffne das SVG in einem Browser oder einem Editor, der SVG liest, und exportiere es in der Größe, die du brauchst.

Mesh Gradient online als Hintergrund nutzen

Webseite oder Hero-Bereich: Füge das CSS in die Regel für dieses Element ein. Text über einem unruhigen Farbmix ist schwer zu lesen, prüfe ihn deshalb mit dem Farbkontrast-Prüfer.
Folien, Hintergrundbilder und Beiträge: Lade das SVG herunter und platziere oder exportiere es aus deiner Design-App.
Zur Marke passend: Klicke auf ein Farbfeld und wähle deine eigene Farbe. Die Bild-Farbauswahl kann vorher eine Farbe aus einem Foto oder Logo holen.

Beide Ausgaben sind eine Momentaufnahme der aktuellen Vorschau. Wenn du erneut zufällig mischst, kopiere oder lade noch einmal, um die neue Version zu bekommen.

Häufige Fragen

Gibt es einen Mesh Gradient Generator mit CSS-Ausgabe?

Ja, diesen hier. Das Feld „CSS-Code“ zeigt eine background-color plus ein background-image aus übereinandergelegten radial-gradient()-Ebenen, eine pro Farbpunkt. Es ist normales CSS ohne JavaScript oder Bilddatei und läuft in jedem modernen Browser. Drücke „CSS kopieren“ und füge es in ein Stylesheet oder ein style-Attribut ein.

Kann ich einen Farbverlauf als SVG herunterladen?

Ja. „SVG herunterladen“ speichert eine Datei mit einer viewBox von 1600 × 1200. Sie besteht aus radialGradient-Ebenen und bleibt deshalb in jeder Größe scharf. In einem Rahmen, der nicht 4:3 ist, füllt sie den Rahmen und beschneidet die Ränder, statt zu strecken.

Wie nutze ich den Verlauf als Website-Hintergrund?

Kopiere das CSS und füge die beiden Angaben in die Regel des Elements ein, das den Verlauf bekommen soll, etwa ein Hero-Bereich oder der body. Die Farbflächen sind in Prozent positioniert und dehnen sich mit dem Element. Prüfe, ob dein Text über den gewählten Farben lesbar bleibt.

Gibt es den Farbverlauf als PNG?

Nicht direkt: Das Tool exportiert CSS und SVG, kein PNG. Öffne das heruntergeladene SVG in einem Browser oder einem Editor, der SVG liest, und exportiere es oder mache einen Screenshot in der Pixelgröße, die du brauchst.

Kann ich den Mesh Gradient animieren?

Nein. Das Tool erstellt einen einzelnen stehenden Verlauf: Du kannst Punkte ziehen und Farben ändern, aber das exportierte CSS und SVG bewegt sich nicht.

Ist das dasselbe wie das Verlaufsgitter in Illustrator?

Nein. Das Verlaufsgitter in Illustrator ist ein Raster aus bearbeitbaren Vektorflächen. Dieser Generator mischt überlappende weiche Radialverläufe, einen pro Farbpunkt. Das ergibt eine ähnlich glatte, mehrfarbige Optik, wird aber als schlichtes CSS oder SVG exportiert.

Was ist ein Farbverlauf CSS Generator mit mehreren Farben?

Ein Werkzeug, das aus mehreren Farben fertigen CSS-Code für einen Hintergrund erzeugt. Dieses hier nimmt 2 bis 8 Farben und legt sie über Farbpunkte als weiche Flächen übereinander. Den Code kopierst du mit „CSS kopieren“.