Mesh-Gradient-Generator
Mesh-Gradients aus mehreren Farbpunkten erstellen, Punkte per Ziehen verschieben und CSS-Code oder PNG exportieren.
Der Mesh-Gradient-Generator mischt mehrere Farbpunkte zu einem weichen, modernen Farbverlauf. Du verschiebst die Punkte per Ziehen, stellst Farbe, Größe und Deckkraft ein und wählst eine Grundfarbe. Das Ergebnis kopierst du als CSS mit übereinanderliegenden radial-gradient()-Ebenen oder als Tailwind-Klasse, oder du lädst es als PNG in beliebiger Größe herunter.
Punkt 1
background-color: #0f172a;
background-image:
radial-gradient(circle at 15% 20%, #f472b6 0%, rgba(244, 114, 182, 0) 60%),
radial-gradient(circle at 85% 15%, #60a5fa 0%, rgba(96, 165, 250, 0) 60%),
radial-gradient(circle at 70% 85%, rgba(163, 230, 53, 0.9) 0%, rgba(163, 230, 53, 0) 55%),
radial-gradient(circle at 20% 80%, rgba(192, 132, 252, 0.9) 0%, rgba(192, 132, 252, 0) 55%);Mesh-Gradients in CSS
Mesh-Gradients wirken lebendiger als klassische Verläufe, weil mehrere Farbzonen ineinander
laufen. In CSS entstehen sie aus mehreren radial-gradient()-Ebenen, die als background-image übereinanderliegen. Darunter liegt eine Grundfarbe, die die Lücken
füllt.
Die Einstellungen
| Einstellung | Wirkung |
|---|---|
| Position | Mittelpunkt des Farbflecks in Prozent der Fläche |
| Größe | Wie weit der Fleck ausläuft, bevor er transparent wird |
| Deckkraft | Stärke der Farbe im Mittelpunkt |
| Grundfarbe | Hintergrund unter allen Ebenen |
So gehst du vor
- Mit „Zufällig mischen“ starten oder Punkte selbst setzen.
- Farben passend wählen, Ideen liefert der Farbpaletten-Generator.
- CSS kopieren oder PNG laden. Für einfache Verläufe nutzt du den Gradient-Generator, für Glaseffekte darüber den Glassmorphism-Generator.
Beispiel
Ein Hero-Bereich mit dunkler Grundfarbe und vier bunten Flecken in den Ecken wirkt modern und braucht kein Bild. Achte darauf, dass Text darüber genug Kontrast hat, denn die Helligkeit schwankt je nach Position.
Häufige Fragen
Was ist ein Mesh-Gradient?
Ein Farbverlauf aus mehreren Farbpunkten, die weich ineinander übergehen. Anders als lineare Verläufe wirkt er organisch und erinnert an Aurora-Effekte. Echte Mesh-Gradients mit Gitter gibt es in CSS nicht, sie lassen sich aber mit übereinanderliegenden radialen Verläufen sehr gut nachbilden.
Wie funktioniert der CSS-Code?
Jeder Farbpunkt ist ein radial-gradient, der in der Farbe beginnt und bis zu einem Prozentwert in dieselbe Farbe mit voller Transparenz übergeht. Die Ebenen liegen übereinander und mischen sich mit der Grundfarbe darunter.
Kann ich das Ergebnis als Bild nutzen?
Ja. Der PNG-Export rendert dasselbe Bild in der gewünschten Größe bis 4000 Pixel, praktisch für Präsentationen, Social Media oder als Hintergrund, wenn du kein CSS nutzen möchtest.
Wie wirkt sich das auf die Ladezeit aus?
CSS-Verläufe brauchen kaum Daten. Sehr viele oder sehr große Ebenen können auf schwachen Geräten das Rendern verlangsamen. Vier bis sechs Punkte sind meist ein guter Kompromiss.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.