Mesh-Gradient
Fünf weiche Farbflecken, die langsam wandern und ineinanderfließen, wie ein lebendiger Farbverlauf.
Einstellungen
Code
<div class="pt-mesh"><i></i><i></i><i></i><i></i><i></i></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Wofür du ihn nutzen kannst
Ein Mesh-Gradient passt gut in den Hero-Bereich einer SaaS-Landingpage, auf die Startseite eines Design-Portfolios oder hinter eine Warteliste. Er bringt Farbe und ruhige Bewegung, ohne dass irgendeine Form deiner Überschrift die Show stiehlt. Es ist ein animierter Farbverlauf als Hintergrund, nur mit HTML und CSS gebaut, ganz ohne Bibliotheken.
Nimm Farben, die auf dem Farbkreis nah beieinanderliegen, etwa Blau und Violett, dann bleibt der Übergang sauber. Gegensätzliche Farben werden dort, wo sie sich treffen, schnell matschig. Steht weißer Text darauf, senk die Deckkraft etwas oder leg eine dunkle Fläche hinter den Text.