设计工具

颜色格式转换

转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。

颜色对比度检查

检查文字与背景的 WCAG 2.2 对比度，实时预览并分别显示普通与大号文字的 AA、AAA 结果。

CSS 渐变生成器

可视化制作线性或径向渐变，编辑 2–8 个色标和位置，实时预览并复制 CSS。

CSS 阴影生成器

直观调整位移、模糊、扩展、颜色与透明度，预览外阴影或内阴影并复制 box-shadow。

宽高比例计算

约分图片或视频的宽高比例，按已知宽度或高度计算另一边，并直观查看画面形状。

CSS Grid 布局生成器

可视化设置固定或自适应网格列、间距和对齐，实时预览布局并输出 CSS 与 HTML。

CSS Flexbox 布局生成器

直观调整弹性布局的方向、换行、间距和对齐，预览效果并获取可用的 CSS、HTML。

配色方案生成器

从基色生成互补色、邻近色、三色配色或单色深浅方案，复制 HEX 并导出 CSS 变量与 JSON。

CSS 圆角生成器

联动或独立调整四角半径，预览普通与椭圆圆角并导出 border-radius。

CSS 多边形裁剪生成器

拖动或精确编辑多边形节点，实时预览 clip-path 并导出可用 CSS。

CSS 贝塞尔缓动曲线

调整两个控制点，播放过渡预览并生成 cubic-bezier 缓动函数。

CSS clamp 响应式字号生成器

用最小与最大字号、视口宽度生成响应式 clamp()，支持 px、rem 和字号预览。

CSS 图片滤镜生成器

在示例图或本地图片上预览模糊、亮度、色彩和透明度，导出对应的 filter CSS。

CSS 2D 与 3D 变换生成器

调整平移、旋转、缩放、倾斜和变换原点，按需启用透视与三维变换并导出 CSS。

纸张尺寸与打印像素换算

查询 A、ISO B、C 与北美纸张规格，按方向、分辨率和出血换算毫米、英寸、点和像素。

SVG 优化与转 PNG

净化并优化 SVG，对照原图检查体积和视觉效果，下载 SVG，或按指定尺寸导出透明、纯色背景的 PNG。