mesh-gradient-dark-blue-clean

name	mesh-gradient-dark-blue-clean
description	创建一套未来感、高级、干净的深蓝网格渐变设计系统，贯穿背景渲染、主视觉外壳、导航、浮动节点、带框板块、CTA 和动效。当界面需要近黑的海军蓝基底、程序化蓝色网格氛围、克制的极简结构，以及基础设施感或行星级纵深时使用。

深蓝干净网格渐变

何时使用

• 整个页面应显得未来感、高级、干净、有基础设施感。
• 深蓝网格渐变应驱动整个构图，而不是作为通用背景衬在后面。
• 界面需要一个中央主视觉外壳、克制的导航、浮动网络提示、带框板块，以及缓慢的技术动效。

方向

建立在近黑基底之上，带深海军蓝或钢蓝底色。在主视觉外壳内部放置一个类着色器的网格渐变、CPPN 风格场、抽象 WebGL 面纱或 canvas 光场。让周围系统保持纪律：清爽排版、细导轨、角部标记、微小状态点、安静的框架，以及稀疏的节点标注。

这不是一个通透的蓝色页面。这不是通用的玻璃拟态。网格是极简系统外壳内部的视觉引擎。

系统配方

1. 基底：近黑海军蓝，而非纯黑。
2. 主视觉外壳：大型圆角容器，配以微妙的白到透明渐变边框和更深的内部填充。
3. 网格场：外壳内部由蓝色主导的程序化 canvas 或 WebGL 图层。
4. 排版：白色标题、灰蓝辅助文案、克制的强调色。
5. 导航：紧凑的深色半透明胶囊，带浅色边缘渐变。
6. 节点：几个浮动的玻璃胶囊、激活点、微小标签和连接线。
7. 结构：细垂直导轨、角部方块、数字标记，以及带框的下部板块。
8. CTA：一个明亮的实心胶囊加一个幽灵或玻璃胶囊，配以淡淡的边框渐变。
9. 动效：缓慢的网格漂移、微妙的扫描条纹、遮罩式文本显现，或微小的节点微光。

颜色令牌

: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 有清晰对比：实心主按钮、玻璃次按钮。