🫧 CSS 液态 Blob 形状生成器CSS Blob Shape Generator

使用说明与常见问题How-to & FAQ

「CSS 液态 Blob 形状生成器」是什么？What is the CSS Blob Shape Generator tool?

用 8 个 border-radius 值生成有机的液态 Blob 形状：随机生成或手动调整、设置渐变色和大小，可加入形状变换的流动动画，复制纯 CSS 代码。Make organic blob shapes from the 8-value border-radius: randomise or tweak by hand, set a gradient and size, add a morphing animation, and copy the pure CSS.

如何使用「CSS 液态 Blob 形状生成器」？How do I use the CSS Blob Shape Generator?

点「随机形状」直到满意，或拖动下方 8 个滑块微调每个角；选择两种渐变颜色和大小，勾选「流动动画」会在两个随机形状之间来回变换。复制 CSS 即可用作背景装饰或头像遮罩。Click Randomise until you like it or fine-tune the 8 sliders; choose two gradient colours and the size, and tick Morph to animate between two random shapes. Copy the CSS for backgrounds or avatar masks.

8 个 border-radius 值分别是什么？What are the 8 border-radius values?

斜杠前 4 个是左上、右上、右下、左下角的水平半径，斜杠后 4 个是对应的垂直半径。水平和垂直半径不同，角就变成椭圆弧，组合起来就是不规则的 Blob。The four values before the slash are the horizontal radii of the top-left, top-right, bottom-right and bottom-left corners; the four after are the vertical radii. Unequal pairs make elliptical corners, which together form a blob.

Blob 能当图片遮罩吗？Can a blob mask an image?

可以。给 img 元素加上同样的 border-radius 和 object-fit: cover，或者把图片设为 .blob 的背景（background: url(...) center/cover），头像就会显示成 Blob 形状。Yes. Give an img the same border-radius plus object-fit: cover, or use the image as the .blob background (background: url(...) center/cover).

「CSS 液态 Blob 形状生成器」免费吗？数据会上传吗？Is the CSS Blob Shape Generator free? Is my data uploaded?

「CSS 液态 Blob 形状生成器」完全免费，无需注册或安装，手机和电脑都能用；所有处理都在你的浏览器本地完成，输入的内容和文件不会上传到服务器。The CSS Blob Shape Generator is completely free with no sign-up or install and works on phones and desktops; everything runs locally in your browser and nothing you enter is uploaded.