CSS clip-path 生成器

选择裁剪形状、调整参数即可实时预览效果，并一键复制标准 CSS 裁剪代码，支持 circle、ellipse、inset 与多边形预设。

形状与参数等待调整

裁剪形状

半径（%）

圆心 X（%）

圆心 Y（%）

实时预览

预览区域

应用裁剪后仅显示裁剪路径内的部分

背景网格可帮助你观察裁剪边界。

CSS 代码

口径说明

clip-path 裁剪不会改变元素布局尺寸，内容超出裁剪区域的部分将不可见。
百分比坐标相对元素自身的宽高计算，示例与多数实际场景均适用。
inset 的 round 圆角使用像素值，省略 round 时输出四方直角。
生成的代码无浏览器前缀附加属性以外的其它兼容性处理，可参考 caniuse 确认目标浏览器支持情况。
本工具在浏览器本地完成生成与预览，不发起任何网络请求。