| name | mesh-gradient-dark-blue-clean |
| description | 创建一套未来感、高级、干净的深蓝网格渐变设计系统，贯穿背景渲染、主视觉外壳、导航、浮动节点、带框板块、CTA 和动效。当界面需要近黑的海军蓝基底、程序化蓝色网格氛围、克制的极简结构，以及基础设施感或行星级纵深时使用。 |
深蓝干净网格渐变
何时使用
- 整个页面应显得未来感、高级、干净、有基础设施感。
- 深蓝网格渐变应驱动整个构图，而不是作为通用背景衬在后面。
- 界面需要一个中央主视觉外壳、克制的导航、浮动网络提示、带框板块，以及缓慢的技术动效。
方向
建立在近黑基底之上，带深海军蓝或钢蓝底色。在主视觉外壳内部放置一个类着色器的网格渐变、CPPN 风格场、抽象 WebGL 面纱或 canvas 光场。让周围系统保持纪律：清爽排版、细导轨、角部标记、微小状态点、安静的框架，以及稀疏的节点标注。
这不是一个通透的蓝色页面。这不是通用的玻璃拟态。网格是极简系统外壳内部的视觉引擎。
系统配方
- 基底：近黑海军蓝，而非纯黑。
- 主视觉外壳：大型圆角容器，配以微妙的白到透明渐变边框和更深的内部填充。
- 网格场：外壳内部由蓝色主导的程序化 canvas 或 WebGL 图层。
- 排版：白色标题、灰蓝辅助文案、克制的强调色。
- 导航：紧凑的深色半透明胶囊，带浅色边缘渐变。
- 节点：几个浮动的玻璃胶囊、激活点、微小标签和连接线。
- 结构：细垂直导轨、角部方块、数字标记，以及带框的下部板块。
- CTA：一个明亮的实心胶囊加一个幽灵或玻璃胶囊，配以淡淡的边框渐变。
- 动效：缓慢的网格漂移、微妙的扫描条纹、遮罩式文本显现，或微小的节点微光。
颜色令牌
:root {
--mesh-bg: #030712;
--mesh-bg-blue: #07111f;
--mesh-shell: rgba(7, 13, 25, 0.82);
--mesh-shell-inner: rgba(4, 9, 18, 0.72);
--mesh-line: rgba(191, 219, 254, 0.14);
--mesh-line-strong: rgba(226, 232, 240, 0.28);
--mesh-text: #f8fafc;
--mesh-copy: #9fb2ca;
--mesh-muted: #64748b;
--mesh-accent: #dbeafe;
--mesh-cobalt: #1d4ed8;
--mesh-indigo: #312e81;
--mesh-steel: #385a7c;
}
页面基底
.mesh-page {
min-height: 100vh;
color: var(--mesh-text);
background:
radial-gradient(circle at 50% 0%, rgba(29, 78, 216, 0.18), transparent 34rem),
linear-gradient(180deg, var(--mesh-bg-blue), var(--mesh-bg) 48%, #01030a);
}
.mesh-page::selection {
color: #020617;
background: var(--mesh-accent);
}
主视觉外壳
使用边框渐变包裹器和更深的内容面板。网格 canvas 位于外壳内内容的后方。
.mesh-shell {
position: relative;
overflow: hidden;
border: 1px solid transparent;
border-radius: 32px;
background:
linear-gradient(var(--mesh-shell), var(--mesh-shell)) padding-box,
linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(147, 197, 253, 0.18), rgba(255, 255, 255, 0.04)) border-box;
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.mesh-shell__field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.78;
: none;
}
{
: relative;
: ;
: (, , );
: (, , );
:
(, (, , , ), (, , , )),
(--mesh-shell-inner);
}
<section class="mesh-shell">
<canvas class="mesh-shell__field" data-dark-blue-mesh></canvas>
<div class="mesh-shell__content">
<nav class="mesh-nav">...</nav>
<h1>Infrastructure for intelligent interfaces.</h1>
<p>...</p>
</div>
</section>
Canvas 网格场
条件允许时，最终构建请使用 WebGL 或 Three.js。这个 2D canvas 模式是扭曲渐变、柔和网格移动和烟雾状蓝色高光的良好后备方案。
function initDarkBlueMesh(canvas) {
const ctx = canvas.getContext("2d");
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let width = 0;
let height = 0;
let frame = 0;
let rafId = 0;
const points = [
{ x: 0.18, y: 0.30, r: 0.45, color: "rgba(29, 78, 216, 0.55)" },
{ x: 0.68, y: 0.22, r: 0.38, color: "rgba(49, 46, 129, 0.58)" },
{ x: 0.78, y: 0.72, r: 0.52, color: "rgba(56, 90, 124, 0.48)" },
{ x: 0.42, y: 0.58, r: 0.34, color: "rgba(219, 234, 254, 0.18)" },
];
function resize() {
rect = canvas.();
dpr = .(. || , );
width = .(, rect.);
height = .(, rect.);
canvas. = .(width * dpr);
canvas. = .(height * dpr);
ctx.(dpr, , , dpr, , );
}
() {
ctx.(, , width, height);
ctx. = ;
ctx.(, , width, height);
ctx. = ;
points.( {
drift = reduceMotion ? : .(time * + index) * ;
x = point. * width + drift;
y = point. * height + .(time * + index) * ;
radius = .(width, height) * point.;
gradient = ctx.(x, y, , x, y, radius);
gradient.(, point.);
gradient.(, );
ctx. = gradient;
ctx.(, , width, height);
});
ctx. = ;
ctx. = ;
( y = (frame % ); y < height; y += ) {
ctx.(, y, width, );
}
frame += ;
(!reduceMotion) rafId = (draw);
}
() {
(rafId);
();
();
}
();
();
.(, handleResize);
{
(rafId);
.(, handleResize);
};
}
导航
.mesh-nav {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 6px;
border: 1px solid transparent;
border-radius: 999px;
background:
linear-gradient(rgba(5, 12, 24, 0.76), rgba(5, 12, 24, 0.76)) padding-box,
linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.16), rgba(255, 255, 255, 0.04)) border-box;
backdrop-filter: blur(18px);
}
.mesh-nav a {
color: var(--mesh-copy);
border-radius: 999px;
padding: 9px 14px;
text-decoration: none;
}
.mesh-nav ,
{
: (--mesh-text);
: (, , , );
}
节点与导轨
.mesh-node {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(191, 219, 254, 0.18);
border-radius: 999px;
padding: 7px 10px;
color: var(--mesh-copy);
background: rgba(5, 12, 24, 0.58);
backdrop-filter: blur(14px);
font-size: 12px;
}
.mesh-node::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #bfdbfe;
box-shadow: 0 0 18px rgba(147, 197, 253, 0.72);
}
.mesh-rail {
position: absolute;
top: ;
: ;
: ;
: (, transparent, (--mesh-line), transparent);
}
{
: absolute;
: ;
: ;
: (--mesh-line-strong);
}
CTA 对
.mesh-cta-primary {
color: #020617;
background: #f8fafc;
box-shadow: 0 16px 36px rgba(219, 234, 254, 0.18);
}
.mesh-cta-secondary {
color: var(--mesh-text);
border: 1px solid transparent;
background:
linear-gradient(rgba(5, 12, 24, 0.62), rgba(5, 12, 24, 0.62)) padding-box,
linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.04)) border-box;
}
动效默认值
- 网格漂移：非常缓慢，12s 到 28s 循环，无锐利缓动。
- 扫描条纹：稀疏的垂直落线或水平线，低不透明度。
- 文本：仅在主视觉标题和板块标签上做遮罩式显现。
- 节点：低强度微光或脉动，而非持续闪烁。
- 减弱动效：冻结网格、移除微光、保持布局与对比完好。
调节旋钮
- 网格可见度：只把不透明度提高到氛围可辨即可；文案始终主导。
- 蓝色调：在靛蓝、海军蓝、钴蓝和钢蓝之间切换，同时保留深色基底。
- 外壳对比：调节外边框、内部填充和 canvas 不透明度，直到各层次显得清爽。
- 网络密度：奢华感就少放节点，技术基础设施感就多放标记。
- 动效强度：缓慢而有氛围，绝不像游戏。
避免
- 没有网格式纵深或程序化特质的扁平 CSS 渐变。
- 到处都是过量的亮青色或电光蓝辉光。
- 拥挤的仪表盘、过多的浮动小组件，或相互竞争的卡片。
- 没有导轨、框架、标记或系统结构的通用半透明团块。
- 过度堆砌的着色器特效，降低可读性。
- 通透的浅蓝板块，破坏深色高级氛围。
快速检查
- 网格在主视觉外壳内可见，且有维度感。
- 基底读起来是近黑海军蓝，而非纯黑或亮蓝。
- 外壳有清爽的边框渐变边缘和更深的内部面板。
- 排版在场之上保持明亮、锐利、易读。
- 节点、导轨、标记和扫描线稀疏且对齐。
- CTA 有清晰对比：实心主按钮、玻璃次按钮。
