在网页设计中，图案是一种非常百搭的视觉元素。它们既可以做主角撑场面，也可以安安静静作为背景存在，而且从简约到复杂都能轻松驾驭。下面，我为你挑了 8 个超有灵性、完全由 CSS 构建的图案案例，让你看看代码和想象力碰撞后能有多好玩。
CSS 波浪纹样
这个波浪纹样的 CSS 不到 14 行！通过 径向渐变 radial-gradient + calc() 就能生成重复的波纹效果。作者 Temani Afif 是 CSS 图案的大神，推荐你深入挖宝。
源码：https://codepen.io/t_afif/full/gOjZwbQ
可重复图案
同样是极少的 CSS，却能生成复杂感十足的背景。主要利用渐变层叠组合而成。
源码：https://codepen.io/nareshguru/full/NWLjvQG
多边形渐变图案
乍一看很复杂，但其实通过 多层渐变 + 不同透明度 就能实现。以前做这种效果基本得靠 Photoshop，如今 CSS 就能轻松实现。
源码：https://codepen.io/justynaj/full/JEmxGb
蓝色格子纹
格纹一向很难画，但这个纯 CSS 的格子纹实现得非常细致，交错线条完美呈现布料纹理。
源码：https://codepen.io/thebabydino/pen/bGKOzvX
CSS 青蛙图案
一个小青蛙“探头探脑”的趣味图案，全程无图片。非常适合教育类、亲子类网站。
源码：https://codepen.io/kayleew93/pen/vYrzNoR
动态标题背景
这个示例把“图案 + 动画文本”结合在一起。背景像是爬行动物皮肤纹理，加上动态标题，非常有个性。
源码：https://codepen.io/curley/pen/VwaxmLd
CSS 噪点纹
像是波形或噪点信号图，科技感十足。顶部和底部的渐隐效果也让视觉更柔和。
源码：https://codepen.io/themounthead/pen/KbGQeK
超大胆图案
该案例使用 CSS Grid + 渐变 + 定位 拼出一个非常具有冲击力的图案，整体效果堪比图片素材。
源码：https://codepen.io/christinastep/pen/LYjjjXY
结论
这些 CSS 图案看起来很复杂，但本质上大多数都由少量代码拼装而成。甚至只要你调个颜色、改个角度、改个尺寸，就能得到完全不同的新图案。所以——大胆尝试！只需要一点点时间，你也能写出属于自己的网页纹理。
本文首发于公众号“web前端开发之旅”，转载请注明出处！
