前端 / CSS工具
渐变、阴影、圆角、布局，写 CSS 最花时间的是反复微调数值。这类生成器把可视化调参和代码输出放在一起，调好直接复制。本页共收录 13 款前端 / CSS工具，全部在浏览器本地运行，打开即用。
前端 / CSS工具列表
颜色转换
HEX / RGB / HSL / HSV 互转，附带预览与色阶
CSS 渐变生成
线性 / 径向 / 锥形渐变，多色标与角度可调
Box-shadow 生成
偏移 / 模糊 / 扩散 / 颜色 / inset 阴影可视化
Border-radius 生成
四角圆角分别或统一调节，实时预览并输出 CSS
Flexbox 代码生成
主轴 / 交叉轴 / 方向 / 换行 / gap 可视化生成
Grid 布局生成
行列数、间距与对齐方式可视化生成 Grid 代码
px / rem / em / vw 换算
按基准字号与视口宽度换算全部 CSS 长度单位
对比度与可访问性
WCAG 对比度比值与 AA / AAA 等级判定，附预览
颜色混合与衍生
两色按比例混合，并给出互补色、反色与色相旋转
配色方案生成
基色生成单色系 / 类似 / 互补 / 分裂 / 三角 / 四方配色
CSS 动画生成
淡入 / 滑入 / 缩放 / 旋转 / 弹跳 / 脉冲 / 抖动，可预览
Clip-path 生成
circle / ellipse / polygon / inset 裁剪路径可视化
CSS Transform 生成
平移 / 旋转 / 缩放 / 倾斜 / 变换原点可视化