Was ist Mesh-Gradient-Generator?

Erstellen Sie mehrfarbige Mesh-Gradienten für Website-Hintergründe, Social-Media-Grafiken und UI-Designs. Wählen Sie Farben, positionieren Sie die Kontrollpunkte und erhalten Sie organische Farbverläufe, die über einfache lineare oder radiale Muster hinausgehen.

Die Leinwand überlagert mehrere radiale Verläufe, einen je Kontrollpunkt. Ziehe einen Punkt, um die Mischung umzuformen, tausche seine Farbe über das Farbfeld, und der Code aktualisiert sich live. Bis zu sechs Punkte halten das Ergebnis ausgewogen. Exportiere als PNG oder SVG in Bannergrößen wie 1920x1080, füge das SVG direkt in Figma ein oder hol dir den Code als CSS, SCSS oder Tailwind.

Anleitung

1. Wahlen Sie Ihre Grundfarben durch Klick auf die Farbfelder oder Eingabe von Hex-Werten. Fugen Sie bis zu 6 Farbkontrollpunkte hinzu.
2. Ziehen Sie die Kontrollpunkte auf der Leinwand, um den Verlauf des Gradienten zu ändern.
3. Kopiere den Code als CSS, SCSS oder Tailwind oder lade den Verlauf als PNG oder SVG herunter.

Wann verwenden

• Einen Hero-Hintergrund gestalten, der nicht nach Standard-Template aussieht.
• Produktkarten oder Playlist-Cover mit Farbe statt mit Foto gestalten.
• Hintergründe für App-Ladebildschirme und leere Zustände erzeugen.

Ergebnis

Ein UI-Designer erstellt einen Mesh-Gradienten von Violett nach Turkis mit 4 Kontrollpunkten fur den Hero-Bereich einer Landingpage und kopiert den CSS-Code direkt in sein Stylesheet.

Häufige Fragen

Worin unterscheidet sich ein Mesh-Gradient von einem linearen Verlauf?

Ein linearer Verlauf mischt zwei Farben entlang einer Achse. Ein Mesh-Gradient legt mehrere weiche Farbflecken übereinander, das Ergebnis ähnelt eher einem Aquarellauftrag als einem sauberen Übergang. Die Grenze zwischen den Farben ist schwerer zu erkennen.

Warum nutzt das CSS radial-gradient statt conic-gradient?

Gestapelte radial-gradients haben die breiteste Browser-Unterstützung und degradieren sauber. Der Generator gibt pro Kontrollpunkt einen radial-gradient aus und stapelt sie per background-image. So funktioniert das Ergebnis in jedem modernen Browser ohne Polyfill.

Sieht mein Mesh-Gradient in Safari und Chrome gleich aus?

Ja. Die Ausgabe nutzt das standardisierte CSS radial-gradient ohne Hersteller-Präfixe. Safari, Chrome, Firefox und Edge zeichnen identische Ergebnisse. Sehr alte Browser fallen auf die erste Farbe zurück.

Wie viele Kontrollpunkte darf ich verwenden?

Bis zu sechs. Mehr Punkte machen die Mischung meist trüber statt reicher. Zwei oder drei Punkte geben grafische, saubere Verläufe; vier bis sechs liefern eher malerische Aquarellflächen.

Kann ich den Verlauf als SVG exportieren?

Ja. Der SVG-Export baut den Verlauf aus gestapelten radial-gradient-Ebenen auf, deshalb wird er überall dargestellt, wo CSS-Verläufe funktionieren, und lässt sich direkt als Formfüllung in Figma einfügen. Der echte SVG-Mesh-Verlauf nach Spezifikation wird bislang nirgends unterstützt, daher ist dieser gestapelte Ansatz die Version, die überall wirklich funktioniert, wo du sie einfügst.

Ähnliche Tools