CSS 渐变详解
深入了解 CSS 渐变。通过实际示例和用例学习线性、径向和锥形渐变。
线性渐变
线性渐变沿直线方向过渡颜色：
background: linear-gradient(direction, color1, color2, ...);To Right
45deg
To Bottom
135deg
径向渐变
径向渐变从中心点向外扩散：
background: radial-gradient(shape size at position, color1, color2, ...);Circle
Ellipse
Top Left
Closest Side
多色渐变
/* 三色渐变 */
background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6);
/* 带位置的颜色停止点 */
background: linear-gradient(90deg,
#3b82f6 0%,
#8b5cf6 50%,
#ec4899 100%
);实用技巧
透明渐变
使用 rgba() 创建透明效果
重复渐变
使用 repeating-linear-gradient
硬边缘
相同位置的颜色停止点
文字渐变
background-clip: text
相关工具
渐变生成器
可视化生成渐变效果