Mesh gradient
Five soft blobs of color that melt into each other and drift slowly, like a living gradient.
Settings
Code
<div class="pt-mesh"><i></i><i></i><i></i><i></i><i></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
A mesh gradient is a safe choice for the hero of a SaaS landing page, the cover of a design portfolio or a waitlist page. You get color and slow movement with no shapes fighting your headline. It’s an animated gradient background in plain HTML and CSS, so there’s nothing extra to load.
Pick colors that sit close on the color wheel, blue and violet for example, and the blend stays smooth. Strongly opposite colors turn muddy where they meet. If white text sits on top, drop the opacity a little or add a dark overlay behind the copy.