CSS 图案生成器，免费

通过纯渐变生成 CSS 背景图案。选择一款图案、自定义并复制。

20px
100%

CSS 代码

CSS 背景图案

CSS 背景图案就是一张平铺的图像（条纹、圆点、网格、棋盘、三角形）完全用 CSS 渐变函数绘制,无需任何图像文件。三个属性完成所有工作:background-image 把任意渐变图像绘制到元素中,background-size 设置该图像一格瓷砖的大小,background-repeat(默认是 repeat)将该图像在两个轴上平铺。background-position 再让接缝偏移,使每一层的瓷砖与其他层对齐。因此一个图案不过是多张渐变图像彼此堆叠,每一张都按相同瓷砖尺寸缩放,每一张都被定位以彼此咬合。浏览器从前到后绘制以逗号分隔的 background-image 值,因此列表中的第一张图位于第二张之上,第二张位于第三张之上,以此类推。

整个流派得以存在,要归功于一个语法小技巧:硬色标。处于同一位置的相邻色标产生瞬间过渡,而不是渐变混合。linear-gradient(red 50%, blue 50%) 不是从红到蓝的过渡（它是一条清晰的分界线。没有硬色标,得到的是平滑渐变;有了它们,得到的是几何图形。条纹、圆点、棋盘、三角形、人字纹）本工具产出的每一个图案都建立在这一个属性之上,只是以不同的角度和瓷砖尺寸应用。

简史，Lea Verou 与 Patterns Gallery

如果说有一个资源对整个纯 CSS 背景图案流派负有责任,那就是 Lea Verou 的 CSS3 Patterns Gallery,最初托管于 lea.verou.me/css3patterns/。Verou 在 2010 年到 2011 年初一直在发布单独的演示,包括 2011 年 2 月一次受人称道的棋盘讲解,然后在 2011 年 4 月 15 日以题为「CSS3 patterns gallery and a new pattern」的文章正式发布了这个 gallery(那个新图案是她称为自己做过最难的一个的日式立方体设计)。几个月之后,2011 年 12 月 1 日,她为 24 ways 的圣诞节倒数日历写下了《CSS3 Patterns, Explained》，至今仍是对每一种条纹、圆点和棋盘图案背后那项「硬色标」技术最好的清晰英文解释。2015 年 6 月,O’Reilly 出版了她的著作 CSS Secrets: Better Solutions to Everyday Web Design Problems,把图案这一章扩展为完整的分类学。这个 gallery 更广泛的文化影响在 Verou 自己的项目笔记中有所记述:它「开启了用 CSS 渐变中的硬色标轻松创建背景图案及其他图形这一广泛实践」,后来还被 Opera Software 的工程师用于微调他们的渐变实现。

从厂商前缀到规范

CSS 渐变在 CSS Image Values and Replaced Content Module Level 3(通常称为「CSS Images 3」)中定义,由 W3C CSS Working Group 维护,Tab Atkins Jr. 与 Elika J. Etemad 等人担任编辑。First Public Working Draft 是 2011 年 7 月 12 日;该规范在 2012 年 4 月达到 Candidate Recommendation,锁定了现代无前缀语法，包括 0deg 指向上方、to right 等价于 90deg 这一约定。浏览器交付顺序:WebKit 大幅领先,在 Safari 4(2009)中 -webkit-gradient() 即可用;Firefox 在 Firefox 3.6(2010 年 1 月 21 日)中交付了 -moz-linear-gradient();Internet Explorer 10 在 2012 年交付了无前缀形式;无前缀语法在 2013 年底前在所有主流引擎上趋于稳定。conic-gradient() 是在 CSS Images Level 4 中规范的,因为在该语法被设计时,Level 3 已进入 Last Call;它在 Chrome 69(2018 年 9 月 4 日)、Safari 12.1(2019 年 3 月 25 日)和 Firefox 83(2020 年 11 月 17 日)中交付。在 2026 年,你可以放心地写 background: linear-gradient(...) 与 background: conic-gradient(...),无需为任何值得支持的浏览器添加前缀或回退。

linear-gradient:角度与方向

形式语法是 linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...)。角度约定经常让开发者绊倒,因为它与 SVG/canvas 的约定不同。0deg 等价于 to top(渐变线指向上方,所以最后一种颜色出现在盒子的顶部)。90deg 等价于 to right。180deg 等价于 to bottom(若未给出方向,这是默认)。270deg 等价于 to left。角度增大时是从顶部起顺时针旋转，这与数学约定相反(数学中 0 在右侧,角度逆时针增大),也与 SVG 的 <linearGradient> 相反。一个有用的细节:to right 与 90deg 仅在正方形盒子上才等价。在非正方形盒子上,to top right 产生的渐变线恰好垂直于从左下角出发的对角线（意味着渐变能干净地命中那个角）而 45deg 则始终就是字面意义上的 45 度,与宽高比无关。这对平铺图案影响不大(瓷砖通常是正方形的),但对 hero 背景影响很大。

radial-gradient:形状、尺寸与圆点

语法是 radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...)。两个形状值是 circle 与 ellipse(默认 ellipse)。尺寸可以是四个范围关键词之一（closest-side、closest-corner、farthest-side 或 farthest-corner(默认)）或显式的长度/百分比。圆点图案的标准配方是 radial-gradient(circle at center, #000 0 5px, transparent 5px),配合 background-size: 20px 20px，每个 20 px 瓷砖中央有一个 5 px 的黑圆,其余透明。可以再加一层在半瓷砖处偏移,以产生六边形点阵。要做纯条纹则不必手动设置瓷砖大小:repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) 产生 10 px 宽的黑白对角条纹,在整个盒子上重复,无需 background-size 声明。Repeating 渐变也有 radial 与 conic 的对应，repeating-radial-gradient 做同心圆环,repeating-conic-gradient 做风车。

conic-gradient:你以前做不出来的饼图与光芒

conic-gradient() 让色标围绕一个中心旋转,而不是沿一条线或从一个中心向外扩展。色标按角度而非长度定位。它的思想史是 CSS 比较有意思的故事之一:Lea Verou 早在 2011 年就起草了一份 conical-gradient() 提案,远在任何浏览器支持它之前;当 Tab Atkins Jr. 把这个函数正式加入 CSS Image Values Level 4 时,他向她的草案致谢。实现拖了好几年。2015 年 6 月,Verou 写了一个 polyfill（使用 SVG 与她的 -prefix-free 库）并在 CSSConf 现场发布,文章题为「Conical gradients, today!」。原生交付于 Chrome 69(2018 年 9 月 4 日)、Safari 12.1(2019 年 3 月 25 日)与 Firefox 83(2020 年 11 月 17 日)到来。conic 渐变能解锁而 linear 与 radial 做不到的事:无需 canvas、SVG 或 JS 的饼图与圆环图(conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) 加上 border-radius: 50% 就是一张完整的饼图);色轮(conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 产生标准色相轮);以小角度间隔交替使用硬色标颜色构成的阳光与星芒图案;渐变边框与角度高光;以及一行声明的棋盘(repeating-conic-gradient(#000 0 25%, #fff 0 50%) 加 background-size 仅用一层渐变就产生棋盘,而不是两层堆叠的线性渐变)。

性能:CSS 图案何时胜过图片,何时不

纯 CSS 图案的性能论点最值得讲清楚,因为它在营销文案里被过度简化了。纯 CSS 的胜出之处:没有 HTTP 请求,没有解码,没有 PNG/JPEG/WebP 的开销（一条 4 行的 CSS 规则就替代了一个二进制文件;矢量分辨率无关）图案在 1×、2×、3× device pixel ratio 下看起来都一样,无需交付 @2x 与 @3x 资源,这是设计系统在 retina 显示器上偏爱渐变图案而非 PNG 的最大单一原因;轻松改色（改一个 CSS 变量就更新整个图案;可动画化）通过 background-position,或者结合@property 让色标也可动画。需要知道的成本:绘制成本随触及像素与渐变复杂度而增长，渐变与大尺寸 box-shadow、复杂 SVG、重型文字效果一样,属于较昂贵的绘制操作,在低端 GPU 上把许多渐变层堆叠到全视口 hero 上可能会掉帧。给渐变的颜色本身做动画会让每一帧都触发完整重绘(这一点正在因 Chromium 与 Firefox 中通过 @property 注册的自定义属性而改变,但改动 background-position 仍是更安全的选择)。实用的经验法则:如果你只有一个全视口图案且不让它动起来,你不会察觉。如果你在长列表的每张卡上堆叠了五层渐变,先做性能剖析。

无障碍:对比度、装饰性与减弱动效

CSS 背景图案按定义就是装饰性的。它们不出现在文档树或可访问性树里;从辅助技术的视角看,它们根本不存在。这在很大程度上是一种特性，W3C WAI 关于装饰性图像的教程明确指出,装饰性图像「应使用 CSS 背景图像而不是」 <img> 提供,这样屏幕阅读器自然会忽略它们。但是放在图案上面的任何东西仍然要满足对比度要求。WCAG 2.1 成功标准 1.4.3 要求普通文本对比度 4.5:1、大文本对比度 3:1。图案让这件事更难,因为背景的局部亮度逐像素变化。WCAG 技术 G18 直接处理这一点:如果背景是图案,可以选择或着色字母周围的背景,使字母与紧邻的背景之间保持 4.5:1 的对比度,即便它们与整张背景之间没有这一比例。在实践中:如果你把文字放到图案上,要么选择彼此亮度相近的图案颜色,要么在文字与图案之间放一张实色卡片。WCAG 2.1 还要求非文本 UI 组件与图形对比度 3:1,这可以适用于基于图案的图标与分隔线。如果你的图案有动画（一条滚动条纹、一个慢速旋转的 conic、一段闪烁骨架）请把动画包在 @media (prefers-reduced-motion: no-preference) 里。动机是医学的,不是风格的:动画可能引发前庭症状(恶心、眩晕)、光敏性癫痫患者的发作以及偏头痛。

SVG 图案 vs CSS 渐变:一次公平对比

SVG 的 <pattern> 元素是 CSS 渐变的精神兄弟。两者都让你把一个单元格平铺到填充区域上。它们各有所长。SVG 图案胜在当单元是渐变难以自然表达的复杂形状时(一片叶子、一片鱼鳞、一个不规则六边形);当你想交付一份由设计师创作的素材时(Steve Schoger 的 Hero Patterns 在 2016 年 9 月 27 日以 CC BY 4.0 许可发布,是 SVG 图案库的代表);当你需要精确的矢量几何来表现渐变硬色标只能近似的锐利曲线;或当你想通过 fill="url(#myPattern)" 在多个 SVG 元素中复用同一图案。CSS 渐变胜在图案是几何性的，条纹、圆点、网格、棋盘、人字纹、三角形,任何由直线与圆构成的东西;当你想要零 HTTP 开销时;当你需要通过 CSS 变量做逐实例定制时(--stripe-color: red 立刻更新图案);当你想把图案作为 CSS 背景应用到任何 HTML 元素上,而不仅是 SVG 内部;或当你想在不依赖 <animate> 元素的情况下让图案动起来时。一种常见的混合技巧是把 SVG 作为 data:image/svg+xml,... URL 内联进 background-image（这样既能拿到纯 CSS「不增加 HTTP 请求」的好处,又允许设计师表达任意形状。代价是编码上的繁琐:# 要变成 %23,双引号需要转义,在 DevTools 里检查 SVG 也不顺手。这个生成器输出的是纯 CSS 渐变图案;这种取舍是有意为之）以最大化形状灵活性为代价,换取简洁与小体积。

CSS 图案在哪里能赚到自己的工钱

这一流派比墙纸要广得多。真实生产环境中的用法包括:

使用方法

  1. 选择图案类型：从条纹、圆点、棋盘、网格、锯齿、三角等图案中选择，全部为纯 CSS。
  2. 自定义颜色和比例：使用滑块调整前景色、背景色、图案大小、角度与间距。
  3. 实时预览：您调整设置时，图案会实时更新。
  4. 复制 CSS：复制生成的 background 属性并粘贴到您的样式表中。

常见问题

这段 CSS 在更老的浏览器里能用吗?

每一款主流现代浏览器都默认且无前缀地交付 linear-gradient、radial-gradient 与 repeating 系列，这一清理在 2013 年底已经完成。conic-gradient 来得晚一些(Chrome 69 于 2018 年 9 月,Safari 12.1 于 2019 年 3 月,Firefox 83 于 2020 年 11 月),但在 2026 年也是普遍的。本生成器不会输出厂商前缀,因为对任何值得支持的浏览器都不需要。Microsoft Edge 在 2020 年 1 月放弃了 EdgeHTML 引擎,IE11 于 2022 年 6 月 15 日抵达生命周期终点;对任何新工具来说,二者都已是历史脚注。

CSS 图案比平铺图片背景更快吗?

对静态图案来说,是的，CSS 图案省下一次 HTTP 请求、一次解码,以及为 retina 显示器交付多分辨率素材所需的工作。图案在任何缩放下都是矢量精确的,且通过 CSS 变量轻松改色。代价在绘制成本:渐变属于浏览器最贵的绘制项之一,在低端 GPU 上把许多渐变层堆叠到全视口 hero 上可能会掉帧。对一张卡或一个区块上的单一静态图案,你不会察觉。如果你发现自己在长列表的每个条目上都堆了五层渐变,请在上线前先做性能剖析。

我要怎样把文字以无障碍的方式放到图案上?

WCAG 2.1 SC 1.4.3 要求文字相对背景的对比度普通文本 4.5:1、大文本 3:1。在带图案的背景上,局部亮度逐像素变化,即使平均对比度看起来还行,最坏情况的对比度也可能不达标。两条安全策略:选择彼此亮度相近的图案颜色(让你的文字与整片瓷砖之间的对比度保持一致),或者在文字与图案之间放一张实色卡片。把文字直接放到高对比图案上(例如黑白条纹)是对比度检查器和真实读者都会受困的情形。

我能给图案做动画吗?

可以。最便宜的动画是用 @keyframes 平移 background-position，在大多数浏览器里它只触发合成器层级的更新,可以稳定跑到 60 fps。直接给渐变的颜色做动画更贵,因为每一帧都会触发完整绘制;现代 Chromium 与 Firefox 可以借助通过 @property 注册的自定义属性来缓解这一点,但 background-position 仍是更安全的默认。请始终把动画包进 @media (prefers-reduced-motion: no-preference) 里，动画背景对敏感用户可能引发前庭症状、癫痫发作和偏头痛。

我的图案在 retina 显示器上为什么看起来发糊?

本不该如此，这正是用渐变而非位图的意义所在。如果你的看起来确实发糊,先检查色标是否落在锐利的百分比上(硬色标是同一位置的两个色标;哪怕只是 50% 50.1% 这样的细微间隙也会引入一条肉眼可见的模糊带),并确保瓷砖尺寸用的是 px 而不是 em 或 %,后者在文字缩放下行为难以预测。早期 Safari 版本上的 conic 渐变会把中心渲染为略微模糊的区域;现代 Safari 与 Chrome 都在 GPU 上栅格化,这一问题基本已经消失。

我的数据会被发到任何地方吗?

不会。图案选择、取色、尺寸调节与 CSS 生成全部在你的浏览器里完成。你操作控件时不会有任何外发请求，可以在 DevTools 的 Network 面板里自行确认。生成的 CSS 是你的,任你粘贴到任何地方。

相关工具

CSS 渐变生成器

可视化创建 CSS 渐变。

玻璃拟态生成器

创建毛玻璃效果。

box-shadow 生成器

可视化 box-shadow 编辑器。