🔲
渐变边框生成器
用 border-image 或 mask 生成漂亮的渐变描边，圆角也适用，复制即用。
本地处理 · 不上传
加载工具中…
相关：渐变边框 · border · gradient border · 描边 · css
渐变边框生成器生成带渐变色的边框效果，可调粗细、圆角与渐变方向。CSS 的 border 不支持渐变，需要用背景叠加或遮罩实现。
使用步骤
- 设置渐变颜色与方向
- 调整边框粗细与圆角
- 预览效果
- 复制生成的 CSS
使用场景
- 为卡片添加醒目的渐变边框
- 制作高亮的选中状态
- 设计带光效的按钮
- 做需要视觉强调的容器
小贴士
- border-image 是最直接的方案，但它不支持圆角——需要圆角渐变边框必须用双层背景配合 background-clip，或用遮罩。
- 双层背景方案的原理是：外层用渐变，内层用纯色背景并设 padding-box 裁剪，露出的边缘就是渐变边框。
- 渐变边框元素做动画时，让渐变角度旋转比让元素旋转开销更小，效果也更精致。
常见问题
为什么 border 不能直接用渐变？
因为 border-color 只接受纯色值，规范中没有定义渐变边框。必须借助 border-image、背景叠加或 mask 来模拟。
渐变边框加圆角为什么方了？
border-image 不支持 border-radius，这是已知限制。需要圆角必须改用双层背景加 background-clip 的方案，或用 mask 挖空中间。
哪种方案兼容性最好？
双层背景配合 background-clip 的方案兼容性最广，也支持圆角。mask 方案代码更简洁但对旧浏览器支持稍差。
渐变边框生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用渐变边框生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。