linear-gradient 怎么用 - 线性渐变语法与角度详解

🌟 线性渐变基础语法#

1
background: linear-gradient(方向, 颜色1, 颜色2, ...);

“方向”可省略，默认从上到下。星点CSS 渐变生成器可视化编辑并复制代码。

🧭 方向与角度#

角度规则：0deg 指向上，顺时针增加，90deg 指向右，180deg 指向下。

🎨 颜色停止点#

可给每个颜色指定位置：

1
background: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%);

• 位置用百分比或长度；
• 不写时自动均匀分布；
• 位置可让颜色”提前到位”，形成硬边：

1
background: linear-gradient(90deg, #000 0 50%, #fff 50% 100%);

🌫 透明渐变（常用）#

图片遮罩常用”透明到黑”：

1
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));

🔁 重复渐变#

1
background: repeating-linear-gradient(45deg, #eee 0 10px, #ddd 10px 20px);

生成条纹背景。

💡 实用示例#

⚠️ 注意#

• 渐变上的文字要在最浅/最深处都检查对比度；
• 色标过多会影响渲染，够用即可；
• 需要感知均匀过渡可用 in oklab（现代浏览器）。

🔧 常见问题#

💬 总结#

linear-gradient = 方向 + 一串颜色（可带位置）。掌握角度与停止点，就能做出按钮、遮罩、条纹等效果。可视化编辑用CSS 渐变生成器。

立即体验：访问 CSS 渐变生成器