颗粒渐变生成器

无需 Photoshop 的现代颗粒渐变

“颗粒渐变”风格——柔和渐变上撒一层细微的胶片颗粒——在现代设计中随处可见，从 Linear 的营销页面到数十个高端产品站点。此生成器将这种效果输出为一段紧凑、自包含的 SVG，可在任何分辨率下缩放，无需任何位图文件。

颗粒如何应用

工具在同一个 SVG 中组合两层。底层是一个填充渐变的 <rect>——线性或径向，带 2 到 5 个色标。上层是另一个 <rect>，其填充是由 SVG 内置滤镜 <feTurbulence type="fractalNoise"> 生成的单色噪点纹理。噪点层以可控的不透明度绘制，从而呈现那种柔和的“尘埃”感。

由于一切都通过 SVG 滤镜实现，颗粒图案在任何尺寸下都保持清晰、非重复——与平铺的 PNG 不同，当背景拉伸到巨大的英雄区时也不会出现明显的拼接缝隙。

控制项

• 类型 — 线性（角度可调）或径向。
• 色标 — 2 到 5 个颜色，带位置滑块，精确控制过渡。
• 颗粒强度 — 噪点层的不透明度。0 关闭颗粒；值越大纹理越明显。
• 颗粒尺度 — 湍流的 baseFrequency。低尺度产生粗大、有质感的颗粒；高尺度产生细腻的胶片式噪点。
• 八度数 — 堆叠的噪点层数。越多越有细节。
• 种子 — 用于可复现性的整数。相同种子 = 相同颗粒图案。

使用场景

• 具有质感而非冰冷的英雄区背景
• 应用启动画面与 iOS 风格小部件卡片
• Product Hunt 式发布横幅
• 音乐与播客封面
• 带细微层次感的仪表盘卡片

在相似文件大小下，SVG 输出总比 JPG 更锐利，且其滤镜在所有现代浏览器中都由 GPU 加速。复制代码粘贴进 <div>，随意缩放——颗粒在各种设备和缩放级别都保持一致。