CSS 渐变生成器

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

CSS渐变生成器使用说明

CSS渐变(gradient)是现代网页设计中最常用的视觉效果之一,可以在两种或多种颜色之间创建平滑过渡。本工具支持线性渐变(linear-gradient)和径向渐变(radial-gradient)两种类型,可视化调整渐变方向、颜色和位置,实时预览效果并一键复制CSS代码。

渐变类型说明

• 线性渐变(linear-gradient):沿一条直线方向过渡颜色,可通过角度控制方向。0deg 表示从下到上,90deg 表示从左到右,常用于页面背景、按钮等场景。
• 径向渐变(radial-gradient):从中心点向外扩散颜色,形成圆形或椭圆形渐变效果,适合聚焦视觉、光晕效果等场景。

使用场景

• 网页背景:替代纯色背景,让页面更有层次感和设计感
• 按钮样式:渐变按钮比纯色按钮更具视觉吸引力
• 卡片装饰:为卡片、面板添加渐变边框或背景
• Banner设计:首屏大图、活动Banner常用渐变叠加
• 社交媒体封面:渐变色是制作社交媒体头图的热门选择

常见问题

CSS渐变兼容哪些浏览器？

CSS渐变被所有现代浏览器广泛支持,包括Chrome、Firefox、Safari、Edge等。IE10及以上版本也支持基本的渐变语法,IE9及以下不支持。

渐变可以设置多少个颜色？

CSS渐变的色标数量没有硬性限制,理论上可以添加任意多个。但实际使用中建议控制在2-5个颜色,过多的色标会让渐变效果杂乱,难以达到好的视觉效果。

怎么复制生成的代码？

调整好渐变效果后,点击代码区域右上角的"复制"按钮,即可将完整的CSS代码复制到剪贴板,直接粘贴到你的样式文件中使用。

线性渐变和径向渐变选哪个？

背景、Banner等大面积区域推荐使用线性渐变,视觉效果更均匀稳定;需要聚焦注意力的场景(如头像光晕、按钮高光)推荐使用径向渐变。

渐变可以做动画吗？

CSS渐变本身不能直接使用transition或animation进行过渡动画。但可以通过设置较大的background-size,然后动画移动background-position来实现"流动渐变"效果,或者使用@property自定义属性实现真正的渐变动画。

需要加浏览器前缀吗？

现代浏览器已经不需要添加-webkit-、-moz-等前缀。除非你需要兼容非常旧的浏览器版本(如Chrome 25以下、Safari 6以下),否则直接使用标准语法即可。