CSS渐变生成器
为您的网站背景和UI元素设计漂亮的渐变。
可视化编辑颜色、角度和位置，然后即时复制CSS代码。 100%免费 — 无需注册。
∞无限使用
98%+浏览器支持
0s注册
background: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%); Pos0%
Pos100%
常见用例
在项目中何处以及如何使用CSS渐变
🎨
英雄背景
用平滑的颜色过渡创建引人注目的英雄区域。渐变为登录页面增添深度和视觉趣味。
🔘
按钮效果
用渐变背景和悬停效果使按钮脱颖而出。创建高端、现代外观的CTA。
📝
文字渐变
将渐变应用于文字以获得令人惊叹的排版效果。非常适合标题、徽标和强调文字。
🖼️
卡片覆盖层
为图片和卡片添加渐变覆盖层，以提高文字可读性和视觉深度。
CSS渐变如何工作
CSS渐变允许在两种或多种颜色之间显示平滑过渡。与图片不同，渐变由浏览器生成，在任何分辨率下都能完美缩放。
渐变类型
- 线性渐变: 颜色沿直线过渡。使用角度或关键词控制方向。
- 径向渐变: 颜色从中心点向外辐射。您可以创建圆形或椭圆形状。
- 锥形渐变: 颜色围绕中心点旋转（像色轮）。非常适合饼图和角度效果。
色标
渐变中的每种颜色称为'色标'。您可以用百分比（0%到100%）或固定长度指定每种颜色出现的位置。
CSS渐变语法和示例
各种渐变类型的即用代码示例
CSSLinear Gradient
/* Basic horizontal gradient */
.element {
background: linear-gradient(90deg, #3B82F6, #9333EA);
}
/* Diagonal gradient */
.element {
background: linear-gradient(45deg, #ff6b6b, #feca57);
}
/* Multiple color stops */
.rainbow {
background: linear-gradient(
90deg,
#ff0000 0%,
#ff7f00 17%,
#ffff00 33%,
#00ff00 50%,
#0000ff 67%,
#4b0082 83%,
#9400d3 100%
);
}CSSRadial Gradient
/* Circle from center */
.element {
background: radial-gradient(circle, #3B82F6, #1E3A8A);
}
/* Ellipse at specific position */
.element {
background: radial-gradient(
ellipse at top left,
#ffecd2 0%,
#fcb69f 100%
);
}
/* Multiple layers for depth */
.glassmorphism {
background: radial-gradient(
circle at 30% 30%,
rgba(255,255,255,0.3) 0%,
transparent 70%
);
}常见问题
线性和径向渐变有什么区别？
线性渐变沿直线创建平滑的颜色过渡。径向渐变创建从中心点向外辐射的颜色过渡。
如何创建对角渐变？
在linear-gradient函数中使用角度值。例如，linear-gradient(45deg, #ff0000, #0000ff)创建从左下到右上的渐变。
可以将渐变应用于文字吗？
可以！将渐变设置为背景，然后使用background-clip: text和-webkit-text-fill-color: transparent使渐变透过文字显示。
CSS渐变在所有浏览器中都支持吗？
CSS渐变有出色的浏览器支持（全球98%+）。所有现代浏览器都支持无前缀的渐变。只有IE9及更早版本需要后备方案。