颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
用渐变生成条纹、圆点、网格等可无缝平铺的背景图案
六种可无缝平铺的图案,全部由 CSS 渐变生成,条纹还能调角度。没有图片资源,也就没有额外的请求。
六种图案(横条纹、斜条纹、圆点、网格、棋盘、锯齿)本质上都是**渐变的组合**:底色 + 一层或多层 `repeating-linear-gradient` / `radial-gradient` + `background-size` 控制平铺周期,输出就是几行 CSS。
两个颜色是「纸」与「墨」(底色与图案色);`size` 是平铺周期、角度只对两种条纹生效——参数与输出的对应关系直接可见。
纯 CSS 的好处:没有额外图片请求、能跟着主题色变、任意缩放不模糊、打印也清晰;代价是做不出噪点与手绘纹理。
选图案
六种形状;两种条纹会多出角度参数。
调纸、墨与周期
周期(`size`)同时决定条纹宽度、点距与格子边长。
复制声明
得到 `background-color` 与 `background-image` 等几行,贴到任何元素上即可。
**列表里靠前的在上层**(与 `z-index` 的直觉相反,第一条 `background-image` 画在最上面)。工具生成的多层顺序是刻意排好的,想调整叠放就调换它们的先后。
纯 CSS 图案没有额外请求、颜色就是变量(能随主题与暗色模式变)、缩放与打印都清晰,体积只有几十字节。代价是只能做几何图案:噪点、纸张纹理、水彩这类必须用图片,SVG `pattern` 更适合复杂矢量纹理。
选择并提取 HEX、RGB、HSL 颜色值
检查前背景色对比是否符合的可访问性标准
可视化创建漂亮的 CSS 线性或径向渐变
可视化调节并复制 box-shadow 代码
各领域物理单位的精准换算
在 B, KB, MB, GB, TB 间进行转换
可视化调节四角圆角并复制 border-radius 代码
拖动顶点调整形状,复制 clip-path: polygon() 代码