Patterncraft favicon

Pattern Craft 一个现代化的背景图案和渐变代码片段库，提供超过 100 种专业级的背景模式。基于 CSS 和 Tailwind，允许用户轻松复制和集成模式到自己的项目中。完全免费。

访问网站

Patterncraft是什么

PatternCraft 是个背景图案库，有 241 个现成的 CSS 和 Tailwind 代码片段。分类挺全的，渐变、几何、装饰、效果都有。每个图案都能实时预览，点一下就能复制代码，直接贴到项目里用。完全免费，用现代 CSS 和 Tailwind 写的，集成起来很简单。
Patterncraft 主页

主页

Patterncraft 主页

主页

如何使用Patterncraft

用起来很简单：

浏览图案库，按分类筛选（渐变、几何、装饰、效果）。点图案卡片能看到实时预览，桌面端鼠标悬停、移动端点击就能看到选项。点「Copy」直接复制 CSS 或 Tailwind 代码，贴到项目里就能用。所有代码都是现成的，不用改就能用。

Patterncraft 的特色

241 个现成图案

渐变、几何、装饰、效果四大类，覆盖各种设计需求

一键复制代码

每个图案都提供 CSS 和 Tailwind 代码，复制即用，不用改

实时预览

桌面端悬停、移动端点击就能看到效果，选图案更方便

完全免费

所有图案都免费，支持商业使用

Patterncraft 的使用场景

网页背景

给网站和 Web 应用加背景图案，提升视觉效果

UI 设计

在移动应用和桌面应用里用图案做背景，让界面更丰富

快速原型

做原型时快速加背景，不用自己写 CSS

Patterncraft 优缺点

优点

图案数量多（241 个），分类清晰
一键复制代码，用起来方便
实时预览，选图案快
完全免费，支持商用
代码现成，不用改就能用

缺点

图案风格相对固定，自定义空间有限
没有搜索功能，找图案得靠分类
更新频率一般

Patterncraft 常见问题

Q1: 可以商用吗？
可以，所有图案都免费，支持商业使用。
Q2: 代码怎么用？
复制 CSS 或 Tailwind 代码，直接贴到项目里。CSS 的贴到样式文件，Tailwind 的贴到 className 里。
Q3: 能自定义颜色吗？
代码可以改，但需要自己调整 CSS。大部分图案的颜色是固定的。
Q4: 图案会更新吗？
作者会持续更新，GitHub 上能看到更新动态。

更多配色

PaletteMaker favicon

PaletteMaker

很多配色网站提供配色方案的时候，缺乏提供相应的场景实例，往往设计师参考色板最终的输出的视觉方案并达不到预期。这个网站提供了大量的参考和案例演示，可以帮助设计师快速的查找和验证配色方案。
Kigen Color favicon

Kigen Color

配色生成器 Kigen Color Generator，提供了多种配色方案和风格，支持导出为 CSS 变量，还有对应的 Figma 插件。
Paletton favicon

Paletton

Paletton 是一个基于传统 RYB 艺术色轮的专业配色工具，支持单色、互补、三元等经典色彩结构，自动生成五级明度，并内置 WCAG 对比度检测与八种色盲模拟。适合品牌、印刷及无障碍 UI 设计，完全免费，无需登录。
ColorAI favicon

ColorAI

ColorAI 从真实图片（如电影、自然、艺术）中提取配色，并标注文化主题与情绪感受。设计师无需懂色彩理论，也能快速找到有叙事感、符合场景氛围的调色板，一键导出 CSS/Tailwind，免费无广告。
配色 主页
阅读量: - 访客量: -

请选择您的角色