Gradient Mesh Hero
Overview
A fluid background of drifting radial gradients with fine grain, headline and buttons centered.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Gradient Mesh Hero to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add gradient-mesh-hero
mcp › Use 8pt MCP to call get_component("gradient-mesh-hero")
Code
Source for Gradient Mesh Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<section class="x-mesh">
<div class="x-mesh__bg" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="x-mesh__grain" aria-hidden="true"></div>
<div class="x-mesh__copy">
<h2>Every pixel<br>aligned</h2>
<a href="#" class="x-mesh__cta">Start</a>
</div>
</section>.x-mesh{position:relative;overflow:hidden;isolation:isolate;width:100%;height:100%;min-height:220px;display:grid;place-items:center;background:#05050a;color:#fff}
.x-mesh__bg i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;opacity:.9;will-change:transform}
.x-mesh__bg i:nth-child(1){left:-15%;top:-30%;background:radial-gradient(circle,#4b3bff,transparent 62%);animation:x-mesh-a 14s ease-in-out infinite alternate}
.x-mesh__bg i:nth-child(2){right:-20%;top:-10%;background:radial-gradient(circle,#00c2ff,transparent 60%);animation:x-mesh-b 17s ease-in-out infinite alternate}
.x-mesh__bg i:nth-child(3){left:20%;bottom:-45%;background:radial-gradient(circle,#ff4fd8,transparent 60%);animation:x-mesh-c 19s ease-in-out infinite alternate;opacity:.6}
.x-mesh__bg i:nth-child(4){right:10%;bottom:-30%;width:40%;background:radial-gradient(circle,#c7ff5e,transparent 60%);animation:x-mesh-a 21s ease-in-out infinite alternate-reverse;opacity:.35}
.x-mesh__grain{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);background-size:3px 3px;mix-blend-mode:overlay}
.x-mesh__copy{position:relative;text-align:center}
.x-mesh h2{margin:0 0 16px;font:700 clamp(26px,4.4vw,52px)/1.02 var(--d-font,system-ui,sans-serif);letter-spacing:-.045em}
.x-mesh__cta{display:inline-block;padding:10px 20px;border-radius:999px;background:#fff;color:#000;font:600 13px/1 var(--d-font,system-ui,sans-serif);text-decoration:none;transition:transform .25s}
.x-mesh__cta:hover{transform:translateY(-2px)}
@keyframes x-mesh-a{to{transform:translate(30%,20%) scale(1.15)}}
…const init = (root) => { root.querySelector('.x-mesh__cta').addEventListener('click', e => e.preventDefault()); };Subscribe to Builder to see the full source.See pricing