透明棋盘格背景生成器
样式所有处理都在浏览器本地完成，数据不上传服务器
生成一段可以直接粘走的透明底纹 CSS。半透明的东西压在纯色底上看不出哪里透明，棋盘格给了「底下有东西」的参照 —— 设计工具一律这么干。 方格与斜纹两种图案，每种都给两套实现。方格的主实现是 `conic-gradient`（一行就够），备选是四条 `linear-gradient` 叠出来（代码长但老浏览器支持更广）；斜纹同理，`repeating-linear-gradient` 写起来短，平铺版支持更广。取舍写在生成的注释里。 ⚠️ 方格的四个扇形必须依次写满。`conic-gradient` 里的 0/25/50/75/100 五个边界一个都不能少 —— 少一段不会报错，浏览器会把最后一段补成渐变，于是你得到一半硬边、一半糊的图案，而它看起来还挺像。这里把五个边界全写出来。 可以选只出一条 `background` 简写，还是分成 `background-image` / `background-size` / `background-position` 几条 —— 要往既有的样式里合并时，分条更好改。
功能
- 方格棋盘格与 45° 斜纹两种图案
- 前景色与背景色用取色器选
- 格子大小 4–64px 可调
- ⚠️ 方格的 0/25/50/75/100 五个停靠点一个不少，不会被浏览器补成渐变
- 方格给 conic-gradient 与四条 linear-gradient 两套实现，并写明取舍
- 斜纹给 repeating-linear-gradient 与平铺版两套实现
- 可选一条 background 简写，或分成 background-image / background-size / background-position 几条
- 实时预览；色值不合法时回落到默认色，拼出来的 CSS 一定合法
- 全部在浏览器本地完成，不上传任何内容
使用方法
- 选方格还是斜纹，调格子大小
- 用取色器选前景色与背景色
- 选简写还是分条，看下方实时预览
- 复制生成的 CSS
常见问题
- 为什么棋盘格要写成 conic-gradient？用重复渐变不行吗？
- 棋盘格是二维的，而 `repeating-linear-gradient` 是一维（条纹）—— 单靠一条它画不出方格。所以方格要么用 `conic-gradient` 一个格子四个扇形，要么用四条 `linear-gradient` 叠出来。斜纹是一维的，才用得上 `repeating-linear-gradient`。两套都给了，按目标浏览器选。
- 少写一段停靠点会怎样？
- 不会报错，但图案会坏。比如只写到 `50% 75%` 就停，浏览器会把剩下那一段补成渐变，于是最后四分之一的格子变成糊的 —— 看起来「差不多」，但盯着看就不对。所以这里把 0/25/50/75/100 五个边界都显式写出来，也有一条测试盯着 25% 与 75% 都在。
- 简写和分条该选哪个？
- 要嵌进已有的样式时用分条（`background-image` / `background-size` / `background-position` 分开），因为你能只改其中一条而保留别的层；从零写一个底纹时用简写更短。斜纹的平铺版与方格的线性版都是多层的，简写会写成一长串，所以那几种这里一律用分条。
相关工具
CSS 渐变生成器
样式调角度、颜色与形状，实时预览渐变效果，一键复制 CSS。支持线性、径向与锥形三种渐变，可选中间色标。
毛玻璃效果生成器
样式调模糊、透明度、饱和度与边框，实时预览毛玻璃效果并复制 CSS。代码含 -webkit- 前缀，iOS 上也能真的出现模糊。
CSS 圆角生成器
样式调四个角的圆角值，实时预览并复制 CSS。支持 px、rem 与百分比 —— 百分比在非正方形盒子上是椭圆，预览区里一眼就能看出来。
新拟态效果生成器
样式调距离、模糊、强度与凹凸方向，实时预览新拟态（柔和 UI）效果并复制 CSS。两个阴影色由底色算出，色相保持不变。
霓虹灯文字
样式调颜色与强度，实时预览霓虹灯文字效果并复制 CSS。多层 text-shadow 叠出光晕，预览区配深色底。
CSS 过渡动画模板
样式挑过渡属性、时长、缓动与延迟，鼠标悬停即可预览并复制 CSS。交付代码里 transition 与 :hover 分开写，分工清楚。