纯 CSS 几何背景 —— 点阵 / 网格 / 条纹 / 棋盘 / 斜纹 / 十字 —— 实时预览, 一键复制, 零图片
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
background-color: #0a0e1a; background-image: radial-gradient(circle at center, #8b5cf6 4px, transparent 4px); background-size: 24px 24px;
这个工具能做什么
用纯 CSS 渐变生成可平铺的几何背景图案 —— 不用图片、不用 SVG data-URI、不发额外 HTTP 请求。选一种类型(点阵、网格、条纹、棋盘、 斜纹、十字),设好前景色和背景色,再拖动"点径/线宽""间距""角度" 滑块,整块预览区会实时刷新。导出的就是普通的 `background-color` / `background-image` / `background-size`,直接粘进任何样式表、Tailwind 任意值、或 CSS-in-JS 模板就能用。因为图案本质是渐变堆叠而不是位图, 它在任意缩放和 DPI 下都锐利不糊,改两个十六进制色值就能瞬间换色, 给样式表只增加大约 60–120 字节,而不是一张几 KB 的 PNG。内置六个 预设(极光圆点、蓝图网格、糖果条纹、棋盘格、警示斜纹、坐标纸)给你 一个顺手的起点,分享链接会原样带上当前图案,同事打开页面时就已经 停在你调好的效果上。全部在浏览器本地运行 —— 你的颜色和复制走的 CSS 不会发到任何服务器。
工具细节
- 输入
- 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 图案生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给 SaaS 的 hero 区加一层低调的点阵纹理
纯色 hero 一看就是"套模板"。流程: 选点阵类型, 背景设成你的 hero 主色(比如 `#0a0e1a`), 前景设成它的低对比变体(`#1e293b`), 点径降到 2px, 间距约 22px。就得到一层安静的圆点纹理, 加了层次 又不抢标题。把三行 `background-*` 复制到 `.hero` 规则里。因为是 渐变实现的, 在 4K 屏上依然锐利, 想做暗色主题只要换那两个色值。
给仪表盘做蓝图 / 网格卡片背景
白页白卡的仪表盘显得很平。选网格类型, 背景设深海军蓝 (`#0b1220`), 前景设暗蓝线色(`#1e3a8a`), 尺寸 1px, 间距 28px, 就得到图表后面的技术感"坐标纸"底。把 CSS 粘到 `.card` 类上。 整体密度由一根间距滑块控制 —— 设计师要更密的网格时, 不用重画 一张平铺图。
给警告横幅做警示斜纹
做"计划维护"或危险操作横幅时, 斜纹类型设 45°、黄色前景 (`#ffe27a`)、深底(`#1c1c1c`)、尺寸 16px、间距 36px, 一眼就读成 "注意"。拖角度滑块翻转条纹方向。把那一行 `repeating-linear-gradient` 复制进警告组件 —— 想让条纹滚动起来, 配一个 `background-position` 过渡就能平滑动画。
快速做一个棋盘透明底
图像编辑器用灰色棋盘格表示透明。想在图片上传预览后面仿这个效果, 选棋盘类型, 前景背景设两种灰(`#2a2a2a` / `#1a1a1a`), 间距 10px, 粘到 `<img>` 后面, 用户立刻读懂"这块是透明的"。conic-gradient 版本在任意尺寸下都平铺得严丝合缝 —— 不用专门发一张 16×16 的 PNG。
不装插件就用 Tailwind 任意值写图案
想要条纹区块, 又不想给项目加 Tailwind 插件或往 assets 里塞背景图。 在这里配好条纹图案, 复制 CSS, 然后作为 Tailwind 任意值内联: `bg-[image:repeating-linear-gradient(...)]`。工具把 px 停靠点都算好 给你, 粘一次就能上线 —— 没有构建步骤, 没有新依赖, `public/` 里 也不多一个文件。
常见踩坑
把间距设得小于(或等于)尺寸, 图案会塌成一整块纯色, 因为前景条带把整个瓦片填满了, 没给背景留缝。让间距明显大于尺寸 —— 工具会把前景条带限制到 间距 − 1px 来避免全实心, 但你仍然要留出可见的比例(比如尺寸 4、间距 24)。
只复制 `background-image` 那一行、漏掉 `background-size`。点阵、棋盘、十字是*平铺型*图案, 靠 `background-size` 定义重复周期。只粘图片那行的话, 图案会按元素整体尺寸渲染一次而不重复。复制工具给的整块, 别只拿一行。
指望角度滑块去旋转点阵或网格。只有条纹和斜纹可定向; 其余是轴对齐的, 不理会角度(这几种下滑块会隐藏)。想改网格观感, 调间距和线宽, 不是角度。
隐私说明
每种图案都由浏览器标签页里跑的纯 JavaScript 字符串构造函数拼出来。 你选的颜色、实时预览、以及复制走的 CSS 都不离开这个页面 —— 不上传、 不对你生成了什么打点、不记录。唯一要留意的隐私点: URL 分享状态会把 你的图案配置(类型 + 两个十六进制色 + 各尺寸)写进 query string, 所以 把"分享链接"粘到 Slack 或邮件时, 对方服务器的访问日志会留下这些值。 如果是还没发布的品牌色, 手动复制 CSS 比分享 URL 更稳妥。设置也会存进 本浏览器的 localStorage, 让你下次打开停在原处; 清除站点数据即可抹掉。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。