赛博空间

一、先做暗角，再加光#

人眼会被亮的地方吸引。如果整张画面均匀发亮，视线就没有落点，大脑判定为「噪」。

所以顺序应该是：

1. 铺一层深色底（近黑，但带一点紫，纯黑会显得脏）。
2. 打两三团大而模糊的光晕，位置错开。
3. 最后压一层暗角，把四周的亮度收回去。

1
.vignette {
2
  background: radial-gradient(
3
    circle at 50% 50%,
4
    transparent 55%,
5
    rgb(0 0 0 / 0.45) 100%
6
  );
7
}

关键在第二步的「大而模糊」：blur(60px) 以上的光晕才有空气感，blur(8px) 只会得到一个塑料圆斑。

二、霓虹要少，且要互相污染#

三种以上的霓虹色同屏，就会开始互相打架。稳妥的配方是：

还有个细节：真实世界的光会互相污染。在两团光的交界处叠一层极淡的中间色，画面立刻就「有空气」了。

TIP

把发光元素放到深色背景上时，降低它的 opacity 到 0.6~0.8 再叠一层模糊副本，比直接用纯色 #fff 舒服得多。

三、噪点：最便宜的质感提升#

纯渐变在 8bit 色彩下会出现色带（banding），尤其在暗部。叠一层 3%~8% 的噪点就能彻底解决，顺带得到一点胶片感。

1
.grain::after {
2
  content: "";
3
  position: absolute;
4
  inset: 0;
5
  background-image: url("/noise.png");
6
  opacity: 0.06;
7
  mix-blend-mode: overlay;
8
  pointer-events: none;
9
}

四、玻璃拟态的分寸#

backdrop-filter: blur() 很诱人，但用多了会让整个界面「糊成一片」，文字可读性急剧下降。

我的原则是：只有悬浮在内容之上的东西才允许玻璃化——导航栏、卡片、弹窗。正文区域永远是实色，保证对比度。

视觉上的高级感，来自克制的对比；而不是把所有效果都打开。

写在最后#

做完这版视觉，最大的体会是：炫不是加法，是减法。把 90% 的区域压暗、压静，剩下的 10% 才有资格发光。