CSS渐变生成器
实时预览创建CSS渐变。
Presets:
background: linear-gradient(135deg, #D94F30, #0D7C66);什么是CSS渐变？
CSS渐变是应用于HTML元素背景的两种或多种颜色之间的平滑过渡。它是现代Web设计中最灵活的属性之一，无需图片即可创建引人注目的专业背景。渐变通过消除对图形文件的依赖来减轻页面重量，改善加载时间，并完美适配任何屏幕分辨率，包括Retina和高像素密度显示器。
CSS渐变有两种主要类型：线性和径向。线性渐变沿直线创建颜色过渡，由角度定义（例如从上到下、对角线或任何自定义方向）。径向渐变则从中心点向外呈圆形或椭圆形辐射，在现代界面中广泛用于创建光照和深度效果。
CSS渐变兼容所有现代浏览器，包括Chrome、Firefox、Safari、Edge和Opera。我们的渐变生成器让你可以实时试验颜色、角度和类型，自动生成可直接复制粘贴到Web项目的CSS代码。
常见问题
所有浏览器都支持吗？
是的。CSS渐变兼容所有现代浏览器，无需厂商前缀。Chrome、Firefox、Safari、Edge和Opera都原生支持。只有非常老的浏览器如Internet Explorer 9或更低版本不支持。
可以使用超过2种颜色吗？
可以，CSS允许多个色标的渐变。虽然我们的生成器使用2种颜色以简化界面，但你可以手动编辑生成的代码，在渐变声明中用逗号分隔添加更多颜色。
如何使用生成的代码？
只需点击“复制”按钮复制CSS代码，然后粘贴到所需HTML元素的样式属性中。你可以在CSS样式表、内联style属性，或Tailwind CSS、styled-components等框架中使用。
想了解更多？ 阅读我们的完整指南 →