创意圆角生成器
免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
border-radius 的 8 值语法是什么意思？
在语法 border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 中，斜杠前是四个角的水平半径（左上、右上、右下、左下），斜杠后是垂直半径。两个方向取不同的数值，就能形成有机的 blob 形状。
如何使用生成的 CSS？
复制这行 border-radius 代码，粘贴到目标元素的任意 CSS 规则中，例如 .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }。普通 CSS、Sass、Tailwind 任意值或内联样式都可以使用。
Blob 形状常用在哪些地方？
Blob 形状常见于首屏插图、头像、个人资料图、功能卡片、按钮以及现代网页和应用中的装饰性背景。
圆角在所有浏览器中都有效吗？
是的。border-radius 在所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和移动端浏览器）中都得到完整支持，不需要任何浏览器前缀。
可以给 blob 形状添加动画吗？
可以。border-radius 是可动画属性，加上 CSS transition 就能在不同形状之间平滑变形，例如 .blob { transition: border-radius .8s ease; }。
4 值语法和 8 值语法有什么区别？
4 值语法把每个角的水平和垂直半径设为同一个值，足够实现胶囊或圆形；8 值语法把水平和垂直半径分开设置，这正是实现不对称有机形状的关键。
如何得到正圆形？
在正方形元素上把 8 个值都设为 50%，或直接使用 border-radius: 50%。也可以先选择一个接近圆形的预设，再在此基础上微调。
我的数据会被上传吗？
不会。生成器完全在浏览器中用纯 CSS 和 JavaScript 运行，你拖动、输入或复制的内容都不会发送到任何服务器。
可以用在非正方形元素上吗？
可以，但百分比半径是相对于元素自身尺寸计算的，矩形会产生椭圆形的圆角，效果与正方形预览不同。建议把生成的数值作为起点再进行调整。
如何使用创意圆角生成器
八值 border-radius 能生成普通圆角矩形无法比拟的有机 blob 形状。用可拖拽的手柄雕出造型，再一键复制现成的 CSS——所有渲染都在浏览器中实时完成。
- 拖动形状边缘上的八个手柄即可造型——上下边缘的手柄控制水平圆角，左右两侧的手柄控制垂直圆角。
- 点击六个预设形状小方块，从一个设计好的形状出发，再用水平圆角和垂直圆角两组数字输入框微调（每个角一个值，范围 0–100%）。
- 点击随机按钮一键生成新的有机形状；重置按钮则恢复默认形状和配色。
- 通过形状颜色和背景颜色选择器，让预览贴近你的目标配色，改动即时生效。
- 点击复制 CSS，把底部栏中实时显示的 border-radius 声明复制走，粘贴到任意元素上即可。
把这段 CSS 用在正方形元素上并配合 overflow: hidden，就能得到经典的 blob 效果；百分比让曲线在任何尺寸下都保持流畅，语法中斜杠前是水平半径、斜杠后是垂直半径。
相关工具
- CSS圆角生成器 可视化CSS圆角生成器，独立调整每个角的圆角半径，实时预览并即时复制生成的CSS代码。
- CSS 渐变生成器 可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
- CSS 阴影生成器 免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
- 配色方案生成器 使用免费在线生成器即时创建美丽和谐的配色方案。支持单色、类似色、互补色、三色、分裂互补和四色模式。通过HSL滑块微调颜色，锁定喜欢的颜色，导出为CSS变量、Tailwind配置、JSON或SVG格式。100%浏览器运行，数据永不离开您的设备。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。
- CSS clip-path 裁剪生成器 免费在线 CSS clip-path 生成器。支持 polygon、circle、ellipse、inset 四种模式，顶点可拖拽，实时预览并一键复制 CSS 代码。