颗粒渐变封面
几团糊开的色块，上面撒一层 1px 的灰色颗粒。拆解 ElevenLabs 博客封面的做法，做成一个可以导出图片的生成器。
复刻canvas
先点「去掉颗粒」，再点「加上颗粒」，注意看颜色过渡的地方。也可以切换配色和纹样，点「换一张」重新摆放色块。满意的话可以下载一张 1600×1600 的 PNG。
三层
底色和色块。 底色是一条从上到下的线性渐变：上端浅、偏冷，下端深、偏暖。上面叠 5 团色块，每团是一个径向渐变，半径占画布边长的 45%–70%，不透明度从中心的 95% 按 (1 − t²)² 的曲线淡到 0，用 16 个色标逼近。只放三四个色标的话，色标处衰减速度会突变，看上去是一圈圈的环。色块按颜色从浅到深，分到从上到下的五条横带里，所以随机摆放也不会把深色放到顶上。每套配色只用色环上相邻的颜色。
颗粒。 预先生成一张噪点图，每个 CSS 像素一个随机灰度，用 overlay 混合模式盖在最上面。底色低于中灰时，overlay 的变化量和底色亮度成正比，所以颗粒在暗处几乎看不见，在亮处明显。颗粒的不透明度是 14%。
纹样。 白色细线，线宽是边长的 1/600（480px 见方时 0.8px），不透明度 30%，都用参数方程画成折线。射线从中心向四周散开，每条沿垂直方向做正弦摆动，离中心越远摆得越大，摆动相位跟着角度走，相邻射线的走势接近；等高线是以中心为圆心的一圈圈环，一直铺到四角，半径叠加 2、3、5、9 倍角的正弦扰动，合计约 ±5%，轮廓不规则又不会变成多边形；声波是两层横向正弦叠加；点阵是规则网格；透镜是两条二次曲线围成的梭形，横竖相间排成格子。画完后用一个径向渐变以 destination-in 合成，把中间擦淡，让出标题的位置。
提示词
复制给 Claude、ChatGPT 或编码 agent，可以复现本页的封面。原推文附的提示词还带色块漂移和悬停柔光，这里没有这两项。
用 Canvas 2D 画一张方形封面：几团糊开的色块，上面撒一层细颗粒，正中是白色标题。不用图片，不依赖外部库。
1. 底色：从上到下的线性渐变，上端浅、偏冷，下端深、偏暖。
2. 色块：5 团径向渐变，颜色从浅到深依次放进从上到下 5 条等高的横带：横向位置在 10%–90% 之间随机，纵向在横带中心上下浮动 8%。半径是边长的 45%–70%。不透明度从中心的 0.95 按 (1 − t²)² 衰减到 0，用 16 个色标逼近；只放三四个色标会在色标处看到一圈圈的环。
3. 纹样（可选一种）：白色细线，线宽是边长的 1/600，不透明度 0.3。中心在画布正中附近。
- 射线：从中心向四周散开 72 条，每条沿垂直方向做正弦摆动，振幅随离中心距离增大，相位取 3 × 角度，让相邻射线走势一致、互不交叉。
- 等高线：以中心为圆心的 36 圈环，间距是边长的 2.4%，铺满到四角。半径叠加 2、3、5、9 倍角的小幅正弦扰动，合计约 ±5%，轮廓不规则但不能变成多边形。
- 声波：28 条横线，每条叠加两层不同频率的正弦，相邻线相位错开。
- 点阵：间距为边长 5% 的规则网格。
- 透镜：两条二次曲线围成的梭形，长度是格子边长的 80%，最宽处的一半是长度的 20%。按边长 42% 的格子排列：横的放在格子横边上，竖的放在竖边上，尖端在格点附近相对，互不重叠。
纹样画完后，用以画布中心为圆心、半径为边长 60% 的径向渐变做 destination-in 合成：不透明度在 0 处为 0，30% 处为 0.15，75% 及以外为 1，把中间让给标题。
4. 颗粒：生成一张噪点图，每个 CSS 像素一个随机灰度，灰度取两个随机数相加的三角分布，让大多数颗粒接近中灰。用 overlay 混合、不透明度 0.14 盖在最上面，放大时关闭图像平滑。
5. 标题：白色，字重 400，字号是边长的 7.5%，行高 1.2，居中；按边长 70% 的宽度换行，最多 3 行。
6. canvas 的像素尺寸按 devicePixelRatio（最大取 2）设置。
配色（底色上端 → 下端；色块从上到下），只用色环上相邻的颜色：
- 暮色：#8f93d6 → #e0703c；#7f8fe0 #c88bc8 #d4688c #ec5a3a #f3a63c
- 沙丘：#90a4ad → #1f0c08；#8fa3ad #a9aea4 #ebc27c #d8581e #2a0f0b
- 深潮：#d2dde4 → #0b2633；#c9d6df #9cc8b9 #4f8f8a #1f5a6e #0b2633
- 苔原：#bccbcd → #142a0c；#b9c9cc #c6d0bf #a0b46a #3f6a23 #142a0c
- 夜航：#b9b4e4 → #120612；#b7b2e3 #e18cc1 #7d40a2 #3a1450 #120612
- 橘光：#d0d7de → #5a1a0c；#cfd6de #f7c79a #ef6b3e #c2471f #5a1a0c