设计师必备
精选适合设计师日常使用的 139 个工具,免费、私密、浏览器本地处理。
-
广告文案检查清单
发布前逐项核查文案 — 标题、CTA、合规条款、技术配置一项不漏
-
ASCII 艺术生成器
文字 ASCII 艺术生成器 ， figlet 风格横幅,多字体。
-
长宽比计算器
长宽比计算器 ， 固定[宽 / 高 / 比例]之一,自动算另外两个。
-
头像生成器
头像生成器 ， 首字母 / 几何 identicon / 随机形状。导出 PNG / SVG。
-
Base64 编码 / 解码
文本、文件、Data URL 一站搞定，纯浏览器运行，数据不离开本地。
-
Base64 图片转换器
图片 ⇄ Base64 互转，拖拽 PNG/JPG/WebP/SVG，得 data URI 用于 CSS / HTML / Markdown。
-
Base64 图片 Data URI 转换器
图片转 data URI（base64 或 URL 编码），解析任意 data URI，支持预览和下载，全部在浏览器完成。
-
Base64 转文件
粘贴原始 Base64 或 data URL, 本地解码、检查字节数并下载还原文件。
-
板英尺计算器
厚 × 宽 × 长 ÷ 12 = 板英尺,多规格料单、按板英尺计价、英制 ⇄ 立方米,浏览器本地
-
CSS 圆角生成器
圆角生成器,8 个角独立调,含 blob 不规则形状,实时预览,一键复制 CSS / SVG path。
-
CSS 投影生成器
可视化 CSS 投影生成器:多层、内阴影、颜色 / 模糊度调节,实时预览。
-
空调 BTU 计算器
房间面积 × 层高 × 朝向 × 人数 → 制冷 BTU/h、匹数和 kW:一次把空调选对,全程浏览器本地。
-
CSS 设计令牌对比度矩阵
粘贴 CSS 变量或 JSON 令牌，选择前景/背景对，一次标出整套设计系统中所有 WCAG AA/AAA 不达标项。
-
地毯用量计算器
房间 + 卷宽 + 损耗 → 延米长度、计费面积(㎡ / ft² / 平方码)与费用,浏览器本地
-
大小写转换
一键转 camelCase、snake_case、kebab-case、PascalCase、Title Case、UPPER、lower,浏览器本地处理
-
中文假文生成器
用真汉字和中文标点造占位文字，三种风格，填进版面就是中文该有的样子，全程本地
-
课堂色轮
交互式色轮，内置互补、类比、三角、分裂互补、四方配色方案浏览器与调色演示，适合美术教师与学生。
-
CSS clip-path 生成器
可视化 CSS clip-path 生成器：polygon / circle / ellipse / inset，可拖拽控点。
-
色盲模拟器
色盲模拟器,粘贴 hex 或上传图,看红色盲/绿色盲/蓝色盲/全色盲眼里是什么样。
-
颜色对比度检测器
颜色对比度检测器,按 WCAG 2.2 标准实时判定 AA/AAA 是否过(普通文本 / 大文本)。
-
颜色格式转换
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转:实时色板 + 对比度,浏览器本地
-
颜色混合器
颜色混合器:任意两色按比例混合,可选 RGB / HSL / LAB 色彩空间,预测结果颜色,一键复制 hex。
-
颜色色阶生成器
输入一个基色,生成 Tailwind 风格 50–950 明暗色阶:逐档复制 HEX,一键导出 Tailwind / CSS / SCSS / JSON,浏览器本地
-
色温转 RGB
把开尔文色温换成近似 RGB 和 HEX，配实时色块和常见照明参考，全程在浏览器本地完成
-
互补色计算器
一个基准色 → 互补、分裂互补、三角、四角、类比、单色六套配色,基于 HSL 色轮,逐色复制 HEX,浏览器本地
-
混凝土用量计算器
板 / 方柱 / 圆形基础 / 楼梯 → 立方米或立方码 + 水泥袋数、砂和石用量,浏览器本地
-
Tailwind 调色板对比度矩阵
粘贴 Tailwind 配色、CSS theme 变量或 JSON 令牌，一次检测所有前景/背景组合的 WCAG AA 与 AAA 对比度。
-
CSS 按钮生成器
做出"真能按下去"的按钮:3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS
-
CSS clamp() 流式字号生成器
CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。
-
CSS 颜色格式转换器
在 HEX、RGB、HSL、OKLCH、CSS 变量和 Tailwind 类之间即时互转，带实时预览。
-
CSS 缓动曲线生成器
拖两个手柄读出 cubic-bezier() 五种内置预设、动效预览、任意进度反解 y 值、浏览器本地运行
-
CSS 滤镜生成器
拖滑块调 blur / brightness / contrast / grayscale / sepia / hue-rotate / saturate / invert / opacity + drop-shadow,实时预览,一键复制 filter 字符串
-
CSS Flexbox 生成器
可视化操控生成生产可用的 flexbox 代码 — 选布局预设、调属性、一键复制 CSS、Tailwind 或 React 内联样式。
-
CSS Flexbox 练习场
可视化 CSS Flexbox 沙盒 — 实时调整容器与子项属性，布局即时更新，一键复制 CSS 代码。
-
CSS 系统字体栈生成器
CSS 系统字体栈生成器, 跨 Win/Mac/Linux/Android/iOS 完整 fallback 链, 含 CJK 中日韩兜底, 一键复制 CSS / Tailwind / SwiftUI 代码。
-
CSS 美化与压缩
CSS 美化与压缩：属性排序、规则缩进、展开或压缩。
-
CSS Grid 可视化生成器
CSS Grid 可视化生成器, 拖动配置列/行, 用 grid-area 命名区域 (header/sidebar/main 等), 一键复制 CSS + HTML, 含 12 套常用模板。
-
CSS Grid 网格生成器
CSS Grid 生成器,可视化设计网格 (行列/间距/区域),一键复制 CSS,响应式。
-
CSS Keyframes 动画生成器
可视化编排 @keyframes:增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS,浏览器本地
-
CSS 多行截断生成器
文字超过 N 行收成省略号, 一键复制 CSS 与 Tailwind 写法, 带实时预览, 浏览器本地运算
-
CSS 加载动画生成器
CSS 加载动画：40+ 个纯 CSS spinner/骨架屏，可调颜色、大小、速度，复制代码就能用。
-
CSS 媒体查询生成器
CSS @media 查询 + 响应式断点生成器:Tailwind / Bootstrap / Material 预设,移动优先 vs 桌面优先,暗色模式、hover、降低动态、宽高比一站搞定。
-
CSS 压缩工具
CSS 压缩：去注释空白、缩短颜色、合并选择器。体积小 30-60%。
-
CSS 图案生成器
纯 CSS 几何背景:点阵 / 网格 / 条纹 / 棋盘 / 斜纹 / 十字,实时预览, 一键复制, 零图片
-
CSS 滚动条生成器
可视化定制滚动条:一次导出 WebKit + Firefox 标准两套 CSS,实时预览,一键复制,纯浏览器本地
-
CSS 阴影生成器 Pro
CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。
-
CSS 优先级计算器
把任意 CSS 选择器算成 (a, b, c) 三元组,对比哪条规则在层叠中胜出,并指出是哪一位分出的胜负,浏览器本地
-
CSS 文字渐变生成器
用 background-clip: text 把渐变填进文字本身,实时预览,可调字号字重,一键复制带 -webkit- 前缀的跨浏览器 CSS。
-
CSS 文字阴影生成器
可视化 CSS text-shadow 生成器:多层叠加、颜色/模糊调节,实时预览,链接可分享。
-
CSS transform 生成器
CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。
-
CSS 三角形生成器
用 border 技巧生成纯 CSS 三角形:8 个方向、实时预览、border 与 clip-path 两种写法一键复制,浏览器本地
-
CSS 变量去重工具
找出重复项并保留干净的CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量提取器
提取、去重并导出CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表转换器
转换CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量列表校验器
校验并解释CSS 变量，支持粘贴文本或上传本地文件。
-
CSS 变量规范化工具
规范化、排序并整理CSS 变量，支持粘贴文本或上传本地文件。
-
三次贝塞尔曲线编辑器
CSS 缓动曲线编辑器, 拖两个控制点出曲线, 实时预览弹球 / 缩放 / 淡入三种动画, 一键复制 cubic-bezier 字符串。
-
Delta E 色差计算器
填两个 HEX 颜色, 算出感知色差 ΔE。CIE76 / CIE94 / CIEDE2000 三种公式, 还给出大白话解读, 浏览器本地运算
-
景深计算器
输入画幅、焦距、光圈和对焦距离,算出近点、远点、总景深和超焦距,纯浏览器本地运算
-
石膏板计算器
墙面 + 天花板面积 → 板数、自攻螺钉、接缝纸带、嵌缝石膏,公英制双单位,浏览器本地
-
Emoji 查找
Unicode 15.1 / 1500+ 中英双语搜索,一键复制,浏览器本地
-
Emoji 合成器
Emoji 合成器,两个 emoji 拼一个新的,纯 Unicode 不调外部 API。内嵌 500+ 经典组合。
-
emoji 推荐器
emoji 推荐器:粘贴标题或文案,自动推荐匹配 emoji。
-
曝光值 EV 计算器
由光圈 + 快门 + ISO 求 EV = log2(N²/t),含等效曝光反解与晴天 16 参考,浏览器本地运算
-
Favicon 生成器
一键生成 favicon 套件:文字或上传图,输出 16/32/180/512 px PNG。
-
围栏材料计算器
总长 + 柱间距 → 柱数、栏板/栏条、横档、水泥袋,公制英制双支持,浏览器本地
-
文件转 Base64
上传小文件并本地转换成原始 Base64 或 data URL, 适合嵌入、fixture 和测试。
-
Flexbox 可视化 Playground 与 CSS 生成器
Flexbox 实战 Playground:在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。
-
地板用量计算器
房间尺寸 + 地板类型 + 每箱覆盖 + 损耗 → 净面积、箱数、块数、费用,公制英制双单位,浏览器本地。
-
字体文件检查器
上传 TTF 或 OTF, 提取字体族、PostScript 名、版本、em 单位、字形数和表清单。
-
字体搭配生成器
字体搭配生成器,50+ 套精选 Google Fonts 标题 + 正文搭配,实时预览,分类筛选,导出 CSS。
-
毛玻璃 CSS 生成器
毛玻璃 CSS 生成器, backdrop-filter 模糊 + 透明度 + 描边一站调, 含 8 套真实背景预览, 一键复制 CSS / Tailwind / SwiftUI 代码。
-
黄金比例计算器
用 φ = 1.618 切分任意长度：长短两段、黄金序列、字号阶、布局分栏、黄金矩形，纯浏览器本地
-
CSS 渐变生成器
可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。
-
渐变网格生成器
渐变网格生成器, 4-12 个控制点双线性混合, 输出 SVG / PNG / CSS 多重 radial-gradient 兜底 (旧浏览器), 一键随机出 marketing 级背景图。
-
方格纸生成器
在浏览器里直接生成可打印的方格、点阵、等距、横线和坐标纸,矢量 SVG,按真实毫米出图
-
草籽用量计算器
草坪面积 + 草种 + 新建/补播 → 精确草籽重量与袋数，公制/美制，浏览器本地
-
碎石/砂石用量计算器
面积 + 厚度 → 体积、吨数、袋数(车道/排水/园路),浏览器本地
-
十六进制颜色去重工具
找出重复项并保留干净的十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色提取器
提取、去重并导出十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色列表转换器
转换十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色列表校验器
校验并解释十六进制颜色，支持粘贴文本或上传本地文件。
-
十六进制颜色规范化工具
规范化、排序并整理十六进制颜色，支持粘贴文本或上传本地文件。
-
HTML 颜色代码表
HTML 颜色代码表:147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。
-
HTML 表单提取器
上传或粘贴 HTML, 提取表单、method、action、字段、label、required、autocomplete、密码字段和安全风险。
-
HTML 压缩工具
HTML 压缩:去注释、空白、可选属性、内联 CSS/JS。体积小 40-60%。
-
Google Fonts CSS2 链接生成器
解析、编辑并生成 Google Fonts CSS2 链接、HTML preconnect 标签、@import、CSS 变量与 Tailwind 字体配置。
-
证件照制作
上传照片自动居中裁剪+缩放到各国护照/身份证/LinkedIn 头像标准尺寸,全程本地,不上传
-
图片压缩器（本地）
图片压缩器，JPG/PNG/WebP 本地压缩不上传，质量滑块、批量、压缩前后对比。
-
图片裁剪
图片裁剪工具,拖框裁剪,固定比例 (1:1/16:9/9:16/4:3) 切换,缩放、旋转,完全本地处理。
-
图片 EXIF 隐私扫描
扫描图片中的 EXIF、GPS、相机、软件、日期、XMP 和 ICC 隐私线索。
-
图片格式转换器
图片格式转换,JPG ↔ PNG ↔ WebP ↔ AVIF 互转,批量处理,透明背景智能填充,完全本地。
-
图床
上传图片即得永久直链,并附可直接粘贴的 Markdown、HTML、BBCode 代码。
-
图片元数据检查
检查 PNG、JPEG、GIF、WebP、SVG 的尺寸、位深、ICC、EXIF、XMP、动画和备注。
-
图片改尺寸
图片改尺寸,JPG/PNG/WebP 按像素/百分比/预设比例缩放,完全本地处理不上传。
-
目标体积图片压缩器
按目标 KB 压缩单张图片，本地质量二分搜索，必要时自动缩小尺寸，带预览和下载。
-
图片转 PDF
图片转 PDF：把 JPG、PNG、WebP 多张图合成一个 PDF，拖拽排序，可选 A4/Letter/贴合图片，全程浏览器本地。
-
图片加水印
图片加水印,文字或图片水印,9 宫格位置、透明度、平铺模式,支持批量。
-
发票/账单生成器
免费发票/账单生成器:浏览器内导出干净 PDF,无注册无水印。
-
JS 压缩工具
JavaScript 压缩,去注释、空白、可选变量名缩短。体积小 40-70%。
-
Lorem Ipsum 占位文本
经典 Lorem Ipsum 填充文本,按段落 / 句 / 词数生成,一键复制,浏览器本地
-
百万像素计算器
宽 × 高 算出百万像素、宽高比、文件大小,再按任意 DPI 给出最大打印尺寸,也能反推所需像素。全程浏览器本地。
-
Meta 标签生成器
SEO meta 标签生成器：title / description / Open Graph / Twitter Card / Schema.org。
-
Mock 数据生成器
生成真实感强的 JSON / CSV / SQL 测试数据：姓名、邮箱、日期、地址、嵌套对象。
-
花押字生成器
输入姓名,生成合礼制的字母组合。传统款姓居中放大,现代款等大按名序,可选圆形方形菱形边框,复制或下载 SVG,全程浏览器本地
-
覆盖物用量计算器
花圃面积 + 铺设厚度 → 立方数、袋数与散装量(多地块、公英制),浏览器本地
-
多文化姓名生成器
11 种文化的随机姓名生成:中文、英文、日文、韩文、阿拉伯、俄语 + 5 种欧洲语言。
-
新拟物 (Neumorphism) CSS 生成器
新拟物 (Neumorphism) CSS 生成器, 内/外凸双阴影 + 8 方向光源, 12 套预设, 一键复制 CSS / Tailwind / SwiftUI。
-
OKLCH 颜色转换器
OKLCH ⇄ HEX、RGB、HSL,跑完整 sRGB → OKLab → OKLCH 管线,带实时色块和 sRGB 色域提示,浏览器本地
-
油漆用量计算器
墙面面积 → 所需油漆升数与桶数,自动扣门窗,含遍数与单价,公制美制双单位,浏览器本地
-
纸张尺寸速查
A4、Letter、A3、B5 等 ISO 与美制纸张的毫米、厘米、英寸尺寸,外加 72/150/300 DPI 像素,浏览器本地
-
纸张克重换算器
按纸种换算克重 GSM ⇄ 美制磅重(lb),再按尺寸算单张重量,浏览器本地运算
-
密码生成器
基于 crypto.getRandomValues 的专业级密码生成器，强密码 + Passphrase 双模式，纯浏览器运行。
-
PDF 页面尺寸检查
检查 PDF 的 MediaBox 和 CropBox, 在打印、合并或上传前发现混合尺寸。
-
占位图生成器
一键生成占位图,尺寸 / 颜色 / 文字 / PNG / JPG / WebP 全搞定。
-
种植间距计算器
地块尺寸 + 株距行距 → 精确株数:方形 / 三角错列两种排列,浏览器本地
-
PPI 计算器
由分辨率 + 对角线尺寸算出像素密度、点距、物理尺寸、宽高比,并判定是否视网膜级,全程浏览器本地运算
-
PX REM EM 换算器
CSS px ↔ rem ↔ em 互转,可视化尺度对比,根字号可调。
-
二维码生成器
文本 / URL / WiFi / 名片一键生成二维码,自定义颜色和尺寸,导出 PNG 或 SVG。
-
RAG 状态色生成器
构建红绿灯 RAG 调色板 — 选 HEX 颜色,导出 CSS 变量、JS token 或 Tailwind 配置,适用于任何流程看板
-
比例计算器
解 a:b = c:x 求未知项、化简比、按比例分配总量、放大缩小食谱图纸:带完整步骤,浏览器本地
-
RGB 转 CMYK 转换器
RGB 和 HEX 转 CMYK 印刷色值，也能 CMYK 反算回 RGB，实时色块加一键复制，全程在浏览器里跑
-
屋顶材料计算器
屋顶投影面积 + 坡度 → 真实斜面面积、roofing squares、沥青瓦包数或板瓦数与底材卷数,公制美制双单位,浏览器本地
-
斜率计算器
填两个点,直接出全套(斜率、倾角、距离、中点、y = mx + b、坡度%),浏览器本地
-
智能引号转换器
直引号和弯引号互转,顺带处理撇号、连接号、破折号和省略号,全程在浏览器本地完成
-
社交平台尺寸大全
社交平台视频/图片尺寸大全,小红书/B 站/抖音/微博/Instagram/YouTube 各位置精确像素和比例。
-
面积计算器
把每间房填进去,一次得到平方米和平方英尺总数,支持损耗和造价,浏览器本地运算
-
楼梯计算器
总高 + 步数 → 踏步高/踏面深、坡度、Blondel 舒适度校验 + 侧视示意图,公英制,浏览器本地
-
SVG 资源审计
审计 SVG 的 viewBox、尺寸、脚本、外部引用、样式、ID、class、title 和 desc。
-
SVG Blob 有机形状生成器
生成圆润有机的 blob 形状,复杂度 / 随机度 / 种子可调,导出 SVG 与 CSS clip-path,100% 浏览器本地
-
SVG 优化压缩器
SVG 优化压缩器, 去注释 / metadata / 空属性 / 圆角小数, 合并无用 group, 100% 浏览器本地不上传, 平均能压 30-60%。
-
SVG 转 Data URI / CSS 背景
把 SVG 内联成 data URI,URL 编码(更小)或 base64,直接给出可粘的 CSS、HTML、纯 URI,并排体积对比,100% 浏览器本地。
-
SVG 转 PNG 转换器
浏览器内把 SVG 栅格化成 PNG:自定义尺寸、1×/2×/3× 高清倍数、真透明背景，全程不上传。
-
SVG 波浪分隔生成器
为落地页生成平滑的 SVG 波浪分隔,波浪数 / 振幅 / 层数 / 种子可调,上下翻转,导出 SVG 与 CSS,浏览器本地
-
Tailwind CSS 速查表
Tailwind CSS 速查表,100+ 工具类(间距/颜色/flex/grid/排版/响应式),带实时预览。
-
瓷砖用量计算器
铺贴面积 + 单砖尺寸 + 留缝 + 损耗 → 所需砖数、盒数、费用，公制英制随切，全程浏览器本地。
-
字号比例阶生成器
选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS,全程浏览器本地
-
壁纸用量计算器
墙面尺寸 + 壁纸卷规格 + 花距 → 每卷可裁条数、所需总条数、需买卷数,正贴/错位对花都算,浏览器本地
-
WCAG 颜色对比度修复器
WCAG 颜色对比度修复器, 输入前景/背景色, 看当前对比度 + 自动给 4 个既保留色相又达到 AA/AAA 的修复方案, 不再瞎猜。