Gradient Mesh Hero
介绍
几团径向渐变缓慢漂移构成流体背景，叠加细颗粒，标题与按钮居中。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Gradient Mesh Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add gradient-mesh-hero
mcp › 使用 8pt MCP 调用 get_component("gradient-mesh-hero")
代码
Gradient Mesh Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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>每一个像素<br>都对齐</h2>
<a href="#" class="x-mesh__cta">开始</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()); };订阅 Builder 查看完整源码。查看价格