跳到正文

设计与配色工具

按 WCAG 校验对比度,挑出无障碍的配色组合。

Blob 形状生成器 - SVG 路径与 CSS border-radius

设计与配色

由种子生成有机 blob 形状:调顶点数、随机度与平滑度,复制 SVG path 或 CSS border-radius。

在此运行 无需登录

按钮样式生成器 - 可视化 CSS 按钮构建

设计与配色

可视化配置按钮的内边距、圆角、颜色、阴影与悬停态,实时预览并一键复制 CSS。

在此运行 无需登录

卡片样式生成器 - 可视化 CSS 卡片构建

设计与配色

可视化配置卡片的内边距、圆角、阴影、边框与悬停效果,实时预览并一键复制 CSS。

在此运行 无需登录

clip-path 生成器 - 多边形顶点与预设形状

设计与配色

可视化编辑 polygon 顶点与预设形状生成 clip-path,实时预览并复制 CSS。

在此运行 无需登录

WCAG 颜色对比度检查器

设计与配色

按 WCAG 2.1 AA 与 AAA 标准检查前景色与背景色的对比度,支持你粘贴的任何格式。

在此运行 无需登录

色温转换器 - 开尔文转 RGB 与 Hex

设计与配色

将 1000K 至 12000K 的开尔文色温转换为 sRGB 的 RGB 与 Hex 值,实时预览并附白平衡参考。

在此运行 无需登录

色轮配色 – 交互选色与配色方案

设计与配色

在交互色轮上选色,生成互补、三角、类似或分裂互补配色。

在此运行 无需登录

CSS Grid 生成器 - 可视化网格布局工具

设计与配色

可视化搭建 CSS Grid 布局:设置行列数、轨道尺寸、间距与对齐,实时预览并复制 CSS。

在此运行 无需登录

光标样式生成器 - 带热点与回退的 CSS cursor

设计与配色

在浏览器里生成 CSS cursor 规则:选内置关键字或上传小图片,设置热点与回退关键字,实时预览,全程本地处理。

在此运行 无需登录

字体配对生成器 - 预览字体搭配并复制 CSS

设计与配色

从内置字体清单选择标题与正文字体,实时预览搭配效果并复制 CSS 变量。

在此运行 无需登录

加载动画生成器 - 纯 CSS 加载动画

设计与配色

生成 CSS 加载动画:圆环 spinner、弹跳圆点、进度条、脉冲圈或骨架屏微光,复制即用。

在此运行 无需登录

OKLCH 颜色编辑器 - 感知均匀色彩与 Display P3

设计与配色

在感知均匀的 OKLCH 色彩空间中调色,复制 oklch() CSS 并附带 sRGB 回退值。

在此运行 无需登录

图案背景生成器 - 可重复的 CSS 与 SVG 背景

设计与配色

把条纹、圆点、网格或棋盘平铺成背景:设尺寸、颜色与角度,实时预览并复制 CSS 或 SVG。

在此运行 无需登录

设备屏幕分辨率参考 - 设备规格速查表

设计与配色

查询主流手机、平板、笔记本与显示器的物理分辨率、CSS 像素、DPR 与视口数据表。

在此运行 无需登录

滚动条生成器 - 自定义 CSS 滚动条样式

设计与配色

可视化定制 webkit 滚动条:尺寸、轨道、滑块、悬停态与圆角,复制带 Firefox 回退的 CSS。

在此运行 无需登录

间距计算器 - t-shirt 尺寸刻度与 CSS 变量

设计与配色

由基数与比例生成间距刻度表(t-shirt 尺寸),预览 px 与 rem 并复制 CSS 变量。

在此运行 无需登录

文字渐变生成器 - CSS 渐变文字

设计与配色

挑选颜色停止点与角度,实时预览 CSS background-clip 渐变文字并一键复制代码。

在此运行 无需登录

CSS Transform 生成器 - 位移、旋转、缩放与倾斜

设计与配色

可视化组合 CSS 变换:位移、旋转、缩放与倾斜,支持自定义原点并复制 CSS。

在此运行 无需登录

CSS Transition 生成器 - 时长、缓动与延迟

设计与配色

配置 CSS 过渡的属性、时长、延迟与缓动,实时演示并复制 CSS。

在此运行 无需登录

波浪 SVG 生成器 - 分层波浪分隔线

设计与配色

生成分层波浪 SVG 分隔条:设层数、振幅、波长、高度与颜色,复制即用的 SVG 代码。

在此运行 无需登录