4.1 / 5
- 189 次投票
CSS条纹背景在线生成
轻松创建精美的条纹背景效果，自定义各种参数，一键复制CSS代码，让您的网站设计更加出彩。
CSS背景
条纹样式
在线工具
前端设计
预览效果
生成的CSS代码
background: repeating-linear-gradient(
45deg,
#7C3AED,
#7C3AED 10px,
#A855F7 10px,
#A855F7 20px
);自定义设置
预设样式
使用说明
如何使用
- 调整角度滑块设置条纹的倾斜角度
- 选择两种颜色来创建条纹效果
- 设置两种条纹的宽度比例
- 点击复制按钮获取CSS代码
- 直接在您的项目中使用生成的代码
使用示例
将生成的CSS代码应用到您的元素上：
.your-element {
width: 100%;
height: 300px;
/* 粘贴从上方复制的CSS代码 */
background: repeating-linear-gradient(
45deg,
#7C3AED,
#7C3AED 10px,
#A855F7 10px,
#A855F7 20px
);
}