VmVibe Materials
EN中文ESHIAR
返回地图
Digital / Web UI

噪点渐变

一种带细噪点的渐变，用来消除 AI 页面常见的塑料般光滑感。

当前状态: ReadyNg
Ng

适用场景

  • 页面背景
  • Hero 卡片
  • 编辑型区块

可调参数

  • grain opacity
  • color depth
  • contrast
  • blend mode
  • scale

AI Prompt

生成克制噪点渐变：颗粒可见但不脏，色彩有层次，避免塑料般光滑，同时保证文字可读。

Tailwind 思路

用渐变负责色彩，再用 repeating-radial-gradient 伪元素制造颗粒。

性能提醒

静态 CSS 噪点较轻；透明度要低，避免影响文字。

CSS

.noise-gradient {
  position: relative;
  background:
    radial-gradient(circle at 18% 16%, rgba(70, 220, 180, .35), transparent 28%),
    linear-gradient(135deg, #14120f, #20231d 42%, #0d1112);
}
.noise-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.35) 0 1px, transparent 1px 5px);
}

React 示例

export function NoiseGradientBlock({ children }) {
  return <div className="noise-gradient">{children}</div>;
}