纯CSS生成艺术：从渐变到交互的实战指南

很多人第一眼看到那种流动的、仿佛自带生命力的网页背景时，脑子里蹦出来的多半是 WebGL、Canvas、Three.js 这些重型武器。但实际上，我按下 F12 翻了半天，最后在样式表里看到的可能只是一段不到 80 行的 CSS——几个渐变叠在一起，打了层模糊，混了个混合模式，加了个旋转动画，整张画面就"活"了。这种用纯 CSS 代码生成视觉作品的做法，正是 CSS 生成艺术。它适合前端工程师、视觉设计师、创意开发爱好者去玩，不需要引入任何绘图库，打开一个 html 文件就能跑。这篇文章我会从原理讲到实战，再把我踩过的坑一次性倒出来。

1. 为什么说 CSS 是被低估的生成艺术媒介

1.1 浏览器替我们干完了所有渲染的脏活

很多人一听"用代码画画"，条件反射就是学习 Canvas API 或 WebGL，觉得那才是"正规军"。CSS 在他们眼里只是排版工具：改颜色、调间距、排排 div。这个认知误区让我觉得挺可惜的。

你仔细想想，CSS 背后其实是一套完整的渲染管线。渐变、滤镜、裁剪、遮罩、混合模式、GPU 合成、动画调度，这些东西浏览器全都内置了。你在 CSS 里写一行 background: conic-gradient(...)，浏览器底层会帮你把角度、色相、插值全部计算好；你写一个 filter: blur(20px)，浏览器直接调用 GPU 去做高斯模糊。这些活儿如果放到 Canvas 里实现，你得自己写着色器、自己管理缓冲区、自己做性能优化。而 CSS 把这些脏活累活全部封装起来了，你只需要告诉它"我要什么"，不用操心"怎么算"。

这就是为什么我觉得 CSS 是一个被严重低估的创作媒介：它的抽象层次恰到好处。你不需要理解像素怎么填充，不需要理解矩阵变换的数学细节，但你能精准地控制规则、节奏和参数，然后让浏览器替你完成最繁琐的渲染计算。

1.2 声明式语言恰好是"参数化创作"的天然载体

生成艺术的核心从来不是"手绘每一帧"，而是"定义一套规则，让规则自己生长出画面"。你写一个圆，它是死的；但你写一个"半径由变量控制的圆，变量随时间变化"，它就成了活的——这就是参数化。

CSS 的声明式模型和生成艺术简直是天作之合。你用自定义属性（CSS Variables）定义一组参数，用 calc()、clamp()、三角函数把这些参数组合成几何形状，再用 animation 驱动参数变化，整个画面就会按照你设定的规则自动演化。而且这种演化不是临时的，你改一个参数，所有引用它的地方会同步更新。

我还记得第一次体会到这种感觉的场景：我给自己博客写了一个动态背景，定义了五六个 CSS 变量控制色相、半径、速度。半夜睡不着改了一个色相数值，整个页面的氛围完全变了，像换了一幅画。那一刻我意识到，CSS 生成艺术不是"写死一张图"，而是"造了一个会自己画画的引擎"。你输进去的是规则和约束，它吐出来的是无数种可能。

2. 撑起 CSS 生成艺术的五块基础积木

既然要玩 CSS 生成艺术，就得先把手上的工具摸清楚。我平时用得最多的有五类：渐变、裁剪与遮罩、混合模式与滤镜、CSS 变量、伪元素与选择器。下面挨个说。

2.1 渐变：一张图都不用的纹理引擎

渐变是整个 CSS 生成艺术里最不值钱也最好用的工具。linear-gradient 负责线性过渡，radial-gradient 负责从中心向外扩散，conic-gradient 负责从圆心开始绕圈旋转。你把这三种渐变当成颜料，把 background-size 当成画笔的粗细，就能在一张空白画布上调制出无穷无尽的纹理。

最简单的例子：一条条纹背景只需要两行 repeating-linear-gradient 就可以实现。把渐变角度改成 45 度，再把 background-size 调小，它就会像瓷砖一样铺满整个屏幕。更进阶的玩法是同时叠十几层 radial-gradient，每一层用不同的 position 和 size，就能做出类似星云、血管、树根那种自然生长的形态。

我还特别喜欢 conic-gradient。它天生适合做扇形、雷达图、齿轮、日晷这类绕中心旋转的图形。配合 filter: hue-rotate() 动画，一张静态的扇形图可以变成不断换色的"流光转盘"。很多看起来复杂得不得了的生成艺术，底层其实就是几个渐变在互相对齐、错位、叠加。

2.2 clip-path 与 mask：在 CSS 里做减法雕刻

如果你把渐变理解成"加法"——往画布上涂颜料，那 clip-path 和 mask 就是"减法"——从已有形状上裁掉一部分。

clip-path 可以直接把元素裁剪成圆形、多边形甚至任意路径。我经常用它配合渐变背景做几何切割：一个正方形背景，裁掉左上角，就得到一个斜切平面；裁成六边形，错位排列后就是蜂巢纹理。它对生成艺术最大的价值在于：你不需要真的准备一张 PNG 素材，形状完全由参数控制，改一个顶点坐标，整个图案就变了。

mask 和 clip-path 的差别在于：clip-path 是硬裁剪，边缘非黑即白；mask 是根据透明度/亮度做渐变遮罩。一个元素如果挂了 mask: radial-gradient(circle, white 0%, transparent 70%)，它的边缘就会自然淡出，看起来像一个柔光斑。这个行为和滤镜 blur 的模糊感完全不同：blur 是把边缘"抹开"，mask 是让边缘"透明掉"。在生成艺术里，柔和的边缘通常更讨喜，所以我做光晕、雾、粒子效果时，mask 是比 blur 更可控的选择。

2.3 混合模式与滤镜：渲染管线的"后期调色"

前面说的都是单层图形的制作，但真正的生成艺术很少只有单层。把多层图形叠在一起，它们之间会发生什么？这就是混合模式（mix-blend-mode）的舞台。

你可以把混合模式理解成 Photoshop 里的图层模式：screen 会