Skip to content

快速上手 ​

INFO

GradLab 需要浏览器支持 WebGL。Chrome、Firefox、Safari 和 Edge 在桌面端和移动端均默认支持 WebGL。

1. 打开 GradLab ​

在任意现代浏览器中访问 gradlab.app。画布会立即开始渲染,默认加载三个内置预设之一。无需注册账号。

2. 选择预设 ​

控制面板顶部有三个预设按钮,点击任意一个即可加载完整配置 — 包括颜色、流动算法和后期处理参数。

预设是起点,不是终点。加载后所有参数均可自由调整。

3. 设置颜色 ​

在调色板区域,点击任意色块打开颜色选择器。你可以:

  • 直接输入十六进制色值
  • 拖拽色块调整混色顺序
  • 点击图片图标从照片中提取颜色
  • 最多添加 8 个颜色,最少保留 2 个

颜色默认在 OKLCH 色彩空间中混合,也可切换 RGB 或 OKLAB。

4. 选择流动算法 ​

打开形态与流动,从下拉菜单中选择 13 种算法之一。每种算法定义渐变的底层运动结构:

  • 经典正余弦 — 平滑的周期性波动,最稳定的起点
  • 平滑噪声(Smooth Noise) — 有机噪声运动
  • 径向等高线 — 从中心向外辐射的同心环
  • 嵌套 SDF 形态(核心光晕) — 基于有符号距离场的几何光晕

使用速度、缩放、液化和形变滑块微调运动感。

5. 调整后期处理(可选) ​

在后期处理面板中可添加:

  • 胶片颗粒 — 在渐变上叠加模拟胶片质感 预览画布还会随鼠标产生轻微倾斜;当前没有单独的倾斜控件,PNG/MP4 不包含这一 CSS 变换。

6. 导出 ​

画布效果满意后,选择导出格式:

按钮输出
下载帧全分辨率 PNG 截图
录制 MP4确定时长后,以固定 30 fps 渲染高画质 MP4
导出代码可嵌入任意网站的独立 HTML 文件

TIP

录制前开启乒乓循环,可获得无缝循环视频 — 非常适合用作社交媒体或网站背景。