🎨

设计工具

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

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。