🎨
设计工具
面向设计师的在线工具，涵盖配色、渐变、阴影、字体、尺寸、图标等视觉设计需求。
30 个工具 · 纯本地运行 · 免费 · 无广告
🎨
颜色选择器
颜色选择和转换工具，支持 RGB/HSL/HEX 格式，对比度预览
📐
宽高比计算器
计算和转换宽高比，支持常见视频图片分辨率
🌑
阴影生成器
CSS box-shadow 阴影效果可视化编辑器
📐
Flexbox 生成器
可视化 Flexbox 布局代码生成器
✨
CSS 动画生成器(简版)
CSS @keyframes 动画代码生成器
💬
文字阴影生成器
CSS text-shadow 文字阴影效果生成器
🔤
字体配对工具
推荐和谐的字体搭配组合
📏
间距计算器
基于比例的间距系统计算器
✂️
裁剪路径生成器
CSS clip-path 裁剪效果生成器
🔄
CSS 变换生成器
CSS transform 变换效果生成器
➡️
CSS 过渡生成器
CSS transition 过渡效果生成器
🖱️
光标样式生成器
自定义鼠标光标样式生成器
📜
滚动条生成器
自定义滚动条样式代码生成器
🔺
CSS 三角形生成器
纯 CSS 三角形代码生成器
🫧
Blob 形状生成器
SVG/CSS 有机 blob 形状生成器
🌊
波浪 SVG 生成器
SVG 波浪背景图案生成器
⏳
加载动画生成器
CSS 加载动画/Spinner 代码生成器
🔵
按钮样式生成器
CSS 按钮样式代码生成器
🃏
卡片样式生成器
CSS 卡片组件样式生成器
🔠
文字渐变生成器
CSS 文字渐变效果生成器
👁️
色彩对比度检查器
Color Contrast Checker，在线使用，设计工具，浏览器本地运行无需上传
🔘
CSS 按钮生成器
Css Button Generator，在线使用，设计工具，浏览器本地运行无需上传
✂️
CSS 裁剪路径生成器
Css Clip Path Generator，在线使用，设计工具，浏览器本地运行无需上传
🔡
字体预览
Font Preview，在线使用，设计工具，浏览器本地运行无需上传
🏷️
颜色名称查询器
按颜色查名称、按名称查颜色，匹配最接近的 CSS 命名色
🌡️
色温转换器
开尔文色温与 RGB 颜色互转，预览暖光冷光的真实色彩
🎨
OKLCH/Display P3 颜色编辑器
以感知均匀的 OKLCH 颜色空间调色，实时预览 Display P3 宽色域色彩，并输出 CSS oklch() 函数代码。
📱
设备屏幕分辨率参考
按设备类型（手机/平板/桌面）浏览主流设备的物理分辨率、逻辑分辨率（CSS 像素）、DPR 和视口尺寸，支持搜索过滤。
✍️
文字转 SVG 路径
将文本渲染为矢量 SVG 路径（使用系统字体或上传 TTF），输出可直接用于 Illustrator / Cricut 的纯路径 SVG。
🌌
极光背景生成器
高级 CSS 极光流动渐变背景生成器，支持自定义色彩、模糊度与动画速度，一键导出纯 CSS 代码。