设计工具

面向设计师的在线工具，涵盖配色、渐变、阴影、字体、尺寸、图标等视觉设计需求。

47 个工具 · 纯本地运行 · 免费 · 无广告

色轮配色交互式色轮和配色方案生成颜色选择器(设计版) 可视化颜色选择工具，支持 HEX、RGB、HSL 等格式 🌈 渐变生成器 CSS 线性/径向渐变代码生成器 🌑 阴影生成器 CSS box-shadow 阴影效果可视化编辑器 🎭 调色板生成器(设计版) 生成和谐配色方案，支持多种色彩理论对比度检查器检查文本与背景颜色的 WCAG 对比度 ⊞ CSS Grid 生成器(布局版) 可视化 CSS Grid 布局代码生成器 Flexbox 生成器可视化 Flexbox 布局代码生成器 ⬜ 圆角生成器 CSS border-radius 圆角效果生成器 🔮 CSS 滤镜生成器(设计版) CSS filter 滤镜效果可视化编辑器 CSS 动画生成器(简版) CSS @keyframes 动画代码生成器文字阴影生成器 CSS text-shadow 文字阴影效果生成器颜色格式转换 HEX、RGB、HSL、CMYK 颜色格式互转色盲模拟器(设计师版) 模拟不同类型色盲视觉效果字体配对工具推荐和谐的字体搭配组合间距计算器基于比例的间距系统计算器 🪟 毛玻璃生成器 CSS 毛玻璃效果代码生成器 🔘 新拟态生成器 CSS 新拟态风格效果生成器裁剪路径生成器 CSS clip-path 裁剪效果生成器 CSS 变换生成器 CSS transform 变换效果生成器 CSS 过渡生成器 CSS transition 过渡效果生成器光标样式生成器自定义鼠标光标样式生成器滚动条生成器自定义滚动条样式代码生成器 🔺 CSS 三角形生成器纯 CSS 三角形代码生成器 🫧 Blob 形状生成器 SVG/CSS 有机 blob 形状生成器波浪 SVG 生成器 SVG 波浪背景图案生成器图案背景生成器 CSS/SVG 图案背景生成器 ⏳ 加载动画生成器 CSS 加载动画/Spinner 代码生成器 🔵 按钮样式生成器 CSS 按钮样式代码生成器 🃏 卡片样式生成器 CSS 卡片组件样式生成器文字渐变生成器 CSS 文字渐变效果生成器 Aspect Ratio Calculator Aspect Ratio Calculator，在线使用，设计工具，浏览器本地运行无需上传 Color Contrast Checker Color Contrast Checker，在线使用，设计工具，浏览器本地运行无需上传 Css Animation Generator Css Animation Generator，在线使用，设计工具，浏览器本地运行无需上传 Css Button Generator Css Button Generator，在线使用，设计工具，浏览器本地运行无需上传 Css Clip Path Generator Css Clip Path Generator，在线使用，设计工具，浏览器本地运行无需上传 Css Transform Generator Css Transform Generator，在线使用，设计工具，浏览器本地运行无需上传 Font Preview Font Preview，在线使用，设计工具，浏览器本地运行无需上传 Palette Generator Palette Generator，在线使用，设计工具，浏览器本地运行无需上传 Svg Path Editor Svg Path Editor，在线使用，设计工具，浏览器本地运行无需上传配色方案生成器(设计版) 生成协调的配色方案，支持多种配色规则颜色混合器(美术调色) 混合两种颜色，实时查看混合结果，支持RGB和HSL模式颜色名称查询器按颜色查名称、按名称查颜色，匹配最接近的 CSS 命名色 🌡️ 色温转换器开尔文色温与 RGB 颜色互转，预览暖光冷光的真实色彩 OKLCH / Display P3 颜色编辑器以感知均匀的 OKLCH 颜色空间调色，实时预览 Display P3 宽色域色彩，并输出 CSS oklch() 函数代码。设备屏幕分辨率参考按设备类型（手机/平板/桌面）浏览主流设备的物理分辨率、逻辑分辨率（CSS 像素）、DPR 和视口尺寸，支持搜索过滤。文字转 SVG 路径将文本渲染为矢量 SVG 路径（使用系统字体或上传 TTF），输出可直接用于 Illustrator / Cricut 的纯路径 SVG。