圆角生成器,8 个角独立调,含 blob 不规则形状,实时预览,一键复制 CSS / SVG path。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
border-radius: 30%;
M 96 0 L 224 0 C 277.02 0 320 42.98 320 96 L 320 224 C 320 277.02 277.02 320 224 320 L 96 320 C 42.98 320 0 277.02 0 224 L 0 96 C 0 42.98 42.98 0 96 0 Z
这个工具能做什么
一个把 CSS `border-radius` 玩到底的圆角生成器。CSS 圆角其实最多支持 8 个值(4 个角各有横向和纵向两个半径),只调一个数字根本不够用。 这工具把全部 8 个值都打开了,三种模式覆盖从"我就想要个圆角"到 "我要一个有机异形"的所有场景:简易模式,一根滑块同步 4 个角; 高级模式,8 根独立滑块对应左上 H+V、右上 H+V、右下 H+V、左下 H+V; Blob 模式,通过随机种子算法生成有机不规则形状,同一个种子永远产出 同一个形状,可以把种子号写进代码里复现。预览区是真实 DOM 元素, 挂的就是输出面板那段 CSS,所见即所得,不存在"预览归预览、上线归 上线"的偏差。12 个手工调过的预设直接覆盖日常会用到的形状:胶囊、 卡片、圆角方、芯片、票券、柠檬、叶子、水滴、蛋形、对话框、Blob 不规则、纯方形。一键复制完整 CSS 声明,再一键复制等效 SVG path (内部用三次贝塞尔曲线近似圆角,适合塞进 `<svg>` 当背景或装饰)。 输出会自动用最简短的合法 CSS:8 个值全相同就缩成 `border-radius: 12px`,横纵轴每个角都相同就用 4 值无斜杠形式,只有真正存在 H/V 非对称时才出完整 8 值带斜杠的写法。单位可在 `%` 和 `px` 之间一键 切换。100% 浏览器本地运算,零依赖,零网络请求。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 20 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 圆角生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给 App 图标和头像做真正的 squircle 蒙版
iOS 那种 squircle 不是单一半径能搞定的,它需要 H/V 非对称, 4 数字生成器做不出来。直接选 squircle 预设,复制 8 值写法, 套到 120px 的头像上。曲率是连续的,在 retina 下角是顺滑的, 不像同样盒子上拍一个 24px 圆角那样,边缘会有种被"捏紧"的 生硬感。
给首屏 hero 做一个会变形的 blob 背景
用同一个种子(比如 4827)、复杂度分别取 0.3、0.6、0.9 生成 3 套 blob,各自复制成显式 8 值声明,塞进 @keyframes 跑 12 秒 循环。标题后面就有了那种缓慢有机的晃动,不用 SVG 库,也没有 一次网络请求。种子号在手,同事光凭这个数字就能复现一模一样 的 3 个形状。
把卡片圆角固化成设计系统 token
团队统一了 8px 卡片和 999px 胶囊。用简易模式设 8px,复制 `border-radius: 8px`,贴成 `--radius-card`;切胶囊预设拿到 chip 的 token 值。8 个角相同时工具会缩成一个数字,token 值 干干净净,不会带 4 个重复的 8px 让你在 code review 里挨个 肉眼核对。
导出票券或对话框形状的 SVG clip-path
带缺口的票券卡角手写起来很痛苦。选 ticket 预设,复制 SVG path,塞进 `<clipPath>` 给商品图做蒙版。这条 path 缩放不糊, 同一个定义,320px 手机卡片和 1440px 桌面 banner 上都能用, 不用为每个断点重画。
常见踩坑
给 blob 形状复制了 4 值写法,H/V 非对称丢了,结果只是个普通圆角盒子。任何异形都要用 8 值带斜杠的输出(比如 `30% 70% 70% 30% / 30% 30% 70% 70%`)。
两个 blob 用缩写形式做动画,浏览器没法把 `12px` 和 `30% 70% ...` 对位插值。两段关键帧都写齐 8 个值、用同一单位,过渡才平滑。
把 SVG path 当成 UI 盒子的像素级精确轮廓用。它是 0.5523 贝塞尔近似,只适合背景和 clip-path;元素边框本身请用 CSS 输出,浏览器画的是真椭圆弧。
隐私说明
所有运算都在你的浏览器里完成。滑块数值、种子、预设,以及 CSS 和 SVG 两种输出,全部本地算出,零网络请求。形状配置会编码进 URL, 这样你分享链接对方打开就是同一个形状,链接里只带圆角数值和单位, 别的什么都不带,随手动一下滑块就能清掉。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。