Mesh-Gradient-Generator
Wähle bis zu fünf Farben und erzeuge Variationen, bis es dir gefällt. Der Hintergrund besteht aus radial-gradient des CSS und lässt sich auch als Bild herunterladen.
So geht’sVerläufe mit mehreren Farben
Verfügbar auf: 
Mesh-Gradient-Generator: wofür es gut ist
Mesh Gradient ist der Verlauf mit mehreren Farbflecken, die sich mischen, viel genutzt in Hintergründen von Websites, Präsentationen und Beiträgen.
Hier wählst du zwei bis fünf Farben, mischst die Positionen, bis es dir gefällt, und kopierst das CSS aus Schichten von radial-gradient, das der Browser ohne Bild zeichnet. Wenn du möchtest, lade als PNG in den Größen Bildschirm, Beitrag, Story oder Link-Bild herunter.
So geht’s
- Wähle Farben und Hintergrund.
- Tippe auf neu mischen, bis dir die Komposition gefällt.
- Kopiere das CSS oder lade das PNG in der richtigen Größe herunter.
Wann nutzen
- Hintergrund des Kopfbereichs (Hero) einer Website.
- Cover einer Präsentation oder eines Beitrags.
- Hintergrundbild fürs Handy.
Häufige Fragen
Was ist ein Mesh Gradient?
Es ist ein Verlauf mit mehreren Farbflecken, die sich in verschiedene Richtungen mischen, statt von einer Seite zur anderen zu laufen. Er wirkt organisch, wie Aurora oder Tinte im Wasser, und wird viel in Hintergründen von Websites und Präsentationen genutzt.
Wie wird es in CSS gemacht?
Mit mehreren Schichten radial-gradient, jede mit einer Farbe an einer Position und an den Rändern transparent, über einer Hintergrundfarbe. Der Browser zeichnet alles, ohne ein Bild zu laden.
Und der Text darüber?
Wähle Farben mit ähnlicher Helligkeit und setze den Text in eine Farbe, die zu allen kontrastiert, oder nutze eine halbtransparente Schicht hinter dem Text. Prüfe den Kontrast vor der Veröffentlichung.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.