跳到主要内容
跳到主要内容
全部工具
专题合集
博客
工具集
首页
设计工具
设计工具
共 85 个免费在线设计工具，浏览器打开即用，数据不离开本地。
CSS 渐变、阴影、圆角都可以可视化调好再复制代码，印章生成器和签名生成器还能做点轻量素材。给前端和设计师省下反复调参数的时间。
CSS代码生成
CSS渐变生成器
可视化调整 CSS 线性、径向渐变，直接生成可用代码
CSS阴影生成器
可视化调节CSS Box Shadow参数，实时预览生成可用代码
CSS圆角生成器
可视化拖拽调整，生成自定义复杂圆角 CSS 代码
SVG 转 CSS 背景
将 SVG 转换为可直接嵌入 CSS 的 Data URI 背景代码
CSS变换生成器
可视化拖拽调整 CSS transform，自动生成可用代码
CSS滤镜生成器
可视化拖拽调整 CSS 滤镜参数，实时预览生成可用代码
CSS玻璃拟态生成器
可视化调节参数，直接生成可复制的 CSS 玻璃拟态代码
CSS Flexbox生成器
可视化拖拽调整 CSS Flexbox 弹性布局参数，直接导出可用代码
CSS Grid生成器
可视化拖拽生成 CSS Grid 布局代码，不用手写网格规则
CSS加载动画生成器
在线生成纯 CSS 加载动画，支持自定义参数调整
CSS三角形生成器
可视化调整参数，直接生成可复制的 CSS 三角形代码
CSS动画生成器
可视化调 CSS 关键帧动画，预览后直接导出可用代码
CSS渐变生成器
在线生成线性、径向 CSS 渐变，实时预览，直接复制可用代码
CSS阴影生成器
拖拽调整参数生成多层 CSS 阴影，实时预览直接复制代码
Flexbox布局生成器
可视化调整 Flexbox 参数，实时预览生成可用 CSS 代码
CSS Grid生成器
可视化拖拽设置 CSS Grid 布局，直接生成可用 CSS 代码
CSS文字阴影生成器
可视化调整CSS文字阴影参数，支持多层，实时预览生成可用代码
CSS圆角生成器
可视化拖拽调 CSS 四个圆角，支持 3 种单位，带 12 种预设效果
CSS变换生成器
可视化拖拽调整 CSS 变换参数，实时预览生成可用代码
CSS变量生成器
输入品牌色，自动生成多种格式的CSS规范主题变量
CSS裁剪生成器
可视化生成 CSS clip-path 裁剪代码，带10种预设形状，支持自定义
贝塞尔曲线生成器
可视化拖拽控制点，生成 CSS 用三次贝塞尔缓动曲线
CSS关键帧动画生成器
可视化编辑CSS关键帧，生成可用代码，内置常用预设动画
CSS渐变生成器
可视化调整 CSS 线性与径向渐变，直接生成可用渐变代码
CSS滤镜生成器
可视化调整 CSS 滤镜参数，实时预览生成可用代码
CSS Flexbox生成器
可视化调节 CSS Flexbox 属性，实时预览生成对应代码
CSS毛玻璃生成器
可视化调节参数，实时预览，直接生成可用的 CSS 毛玻璃代码
CSS加载动画生成器
提供 20 多种 spinner 样式，调节参数，复制 CSS 直接用
CSS三角形生成器
通过 border 技巧生成 CSS 三角形，调节参数导出可用代码
CSS阴影生成器
可视化调节 CSS 盒阴影参数，实时预览导出可用代码
Tailwind CSS颜色选择器
浏览 Tailwind CSS 官方调色板，自动生成对应类名与 CSS 变量
CSS预设生成器
可视化生成按钮卡片输入框等常用 CSS 预设样式，可直接复制代码
新拟态设计生成器
在线调整参数，生成新拟态风格的 CSS 代码
Tailwind网格生成器
可视化配置 Tailwind CSS Grid 布局，直接输出可用代码
CSS文字特效生成器
可视化调整文字样式，直接导出可用的 CSS 特效代码
Tailwind动画生成器
可视化拖拽调整参数，直接生成可复制的 Tailwind CSS 动画代码
CSS骨架屏生成器
根据你上传的页面截图，自动生成对应布局的 CSS 骨架屏代码
CSS按钮设计器
可视化拖拽调整 CSS 按钮样式，直接导出可用代码
毛玻璃效果生成器
拖动调节参数，实时预览，直接生成可用 CSS 毛玻璃效果代码
CSS Clip-Path 生成器
可视化拖拽编辑 CSS clip-path，直接生成可用裁剪代码
CSS Grid 演练场
可视化调整 CSS Grid 参数，实时预览布局效果
圆角生成器
可视化拖拽调整四个圆角，生成可用 CSS 圆角代码
颜色相关工具
配色方案生成
输入基础色，自动生成多种专业规则的配色方案
图片色卡提取
从图片提取主色调，自动生成可复制色卡，分析颜色占比
颜色对比度检测
计算前景背景颜色对比度，输出 WCAG 合规结果
配色方案分析
从图片提取主色，生成符合 WCAG 标准的配色对比度报告
色盲模拟器
上传图片，模拟 8 种色觉缺陷的实际视觉效果，检测配色无障碍
高级颜色拾取器
支持 HSL/HSV/RGB/HEX 多格式，可生成和谐配色的颜色拾取工具
配色和谐方案
基于经典色彩理论，生成 6 种和谐配色方案
颜色混合器
两种颜色按比例混合，支持 12 种 CSS 混合模式，生成渐变过渡色阶
配色方案生成器
输入基础色生成完整配色，支持 WCAG 对比度检查
颜色对比度检查器
检查前景色与背景色对比度，对照 WCAG 评估无障碍等级，实时预览文字效果
主题色生成器
输入主色生成 Tailwind 风格完整色阶，输出 CSS 变量配置代码
配色方案生成器
按色彩和谐规则生成配色，锁定颜色，可导出 CSS/Tailwind 格式
颜色选择器
色轮选色，实时预览，支持 6 种颜色格式输出与历史收藏
Material Design调色板
浏览谷歌官方 Material Design 完整色板，点击查看色值
颜色色调生成器
输入基础色，自动生成 10 级明暗色调变体和对应 CSS 变量
配色方案生成器
根据配色规则生成和谐配色，支持一键复制色值
图形绘制编辑
像素画编辑器
浏览器端像素画绘制，支持自定义画布、图层、镜像绘制，导出 PNG
思维导图编辑器
浏览器端思维导图编辑器，支持拖拽节点，可导出 PNG、SVG、JSON。
SVG路径编辑器
可视化编辑 SVG path 路径数据，拖拽控制点实时预览
流程图制作器
浏览器内拖拽绘制流程图，支持导出 PNG 和 SVG 图片
专业像素画编辑器
浏览器端专业像素画编辑工具，支持多图层动画帧，可导出 GIF
在线画板
浏览器端手绘草稿，支持多图层，可导出 PNG 图片
SVG动画制作器
编辑 SVG 代码，用预设模板添加动画，实时预览导出成品
数字绘画工具
浏览器内直接作画，支持多笔刷压感图层，导出 PNG
贝塞尔曲线编辑器
可视化拖拽编辑二次、三次贝塞尔曲线，直接导出 SVG 路径代码
在线白板
基于 Excalidraw 的手绘风在线白板，支持导出 PNG
Mermaid 图表编辑器
输入 Mermaid 文本语法，实时生成各类图表，可导出
SVG处理工具
SVG占位符生成器
自定义尺寸、颜色、文字，生成 SVG 占位图，支持输出 SVG 或 Base64
SVG优化器
压缩 SVG 文件体积，移除冗余代码，保留可用属性
图表生成编辑
数据图表生成器
导入 CSV / JSON 数据，生成可自定义的柱状图、折线图、饼图
CSV转图表
粘贴 CSV 数据直接生成可交互折线、柱状、饼图
字体排版工具
字体度量工具
解析字体基线、x高度、升部降部参数，给出行高建议
字体预览器
在线预览对比 Google Fonts，调节参数后生成对应 CSS 代码
排版比例生成器
基于音程和黄金比例，生成 CSS 字号变量，支持实时预览
字体预览器
输入文字实时预览 Google 字体效果，直接导出 CSS 引用代码
字体配对工具
提供预设中英文字体配对方案，可预览搭配效果并复制 CSS 代码
图形素材生成
印章生成器
自定义生成圆形公章、私章样式，可调文字、尺寸、颜色
签名生成器
在线生成手写风格签名图片，支持自定义颜色和线条粗细
在线生成字帖
输入文字生成可打印练字帖，支持三种字体三种格型
网格纸生成器
自定义生成方格、点阵、横线、等距网格纸，可直接打印下载
Favicon生成器
从文字、emoji生成网站Favicon，导出多尺寸 PNG/ICO
OG图片生成器
自定义生成符合 Open Graph 规范的社交分享卡片图片