Border Radius 生成器

可视化 border-radius 编辑器：均匀模式（快速圆角）、逐角模式（聊天气泡、Tab）、椭圆模式（blob——横半径 ≠ 纵半径）。多种常见形状预设。单位 `px`、`%`、`rem`。输出最短有效 CSS——四角相同则一值，不同则四值，椭圆使用 `h / v` 完整语法。

—

预设

均匀（所有角同值）椭圆（横 / 纵）单位Color

All corners16px

预览

CSS

border-radius: 16px;

使用方法

选预设开始，或关闭"均匀"逐角编辑。
blob 形状开"椭圆"（每角两个半径）。
复制 `border-radius: …` 粘进 CSS。

常见问题

椭圆半径真有什么用？: 多用于插画里有机的 "blob" 形状，每角不对称。标准 UI 几乎都是均匀或 4 值。
px 与 % 区别？: % 相对元素宽/高——正方形 50% 为圆，长方形为椭圆。px 与元素尺寸无关，是绝对值。
Pill 预设在正方形上看起来不对。: Pill = 999px 假定元素宽大于高，正方形上就变成圆。
浏览器支持？: 四值 `border-radius` 与椭圆语法 2010 年起所有浏览器都支持，普世安全。

相关工具

图像圆角

对图像应用圆角、完整圆形遮罩或每个角的半径 —— 用棋盘格预览透明度，下载为 PNG 或 JPEG。

CSS 三角形生成器

用 border 或 clip-path 生成 8 方向纯 CSS 三角形——复制规则即可用。

CSS clip-path 构建器 (圆、椭圆、多边形、Inset)

CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。

CSS 渐变生成器

用多色停靠点设计线性或径向 CSS 渐变并复制代码。

CSS Box Shadow 生成器

可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。

CSS 滤镜演练场

可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。