什么是CSS 渐变生成器？
免费在线 CSS 渐变生成器。创建线性、径向和圆锥渐变，实时预览并生成对应 CSS 代码。
CSS 渐变是为网页设计增添深度、氛围和视觉趣味最有效的方式之一，无需依赖外部图片。一个精心挑选的渐变可以将平淡的背景变得精致而有目的感。CSS 渐变生成器（CSS Gradient Generator）让创建这些渐变变得直观：选择线性或径向，挑选颜色，调整角度或位置，然后复制即可直接使用的 CSS 代码。
线性渐变沿直线过渡颜色。角度可从 0 到 360 度调整——0 度从下到上，90 度从左到右，180 度从上到下，270 度从右到左。径向渐变从中心点向外以圆形或椭圆形图案辐射。通过水平滑块和垂直滑块定位中心，使渐变可以从任何角落或边缘开始，而不只是默认的中心。
两种渐变类型都支持 2 到 3 个颜色停止点。每个停止点都有各自的颜色选择器，因此您可以微调过渡中的每种颜色。实时预览会随您调整任意参数而更新，提供即时视觉反馈。内置六个预设渐变作为起点——点击一个即可加载到编辑器中，然后自定义颜色和角度以匹配您的设计。
复制的 CSS 代码可直接用于生产环境。它使用标准的 linear-gradient() 或 radial-gradient() 语法，在需要处添加供应商前缀，因此可在 Chrome、Firefox、Safari 和 Edge 中正常工作。将其直接粘贴到样式表的 background 或 background-image 属性中。无需清理或修改——代码格式整洁，立即可用。
渐变的用途远不止简单的背景。可将其用于叠加效果——在半透明渐变叠加到英雄图上时，通过压暗边缘同时保持中心较亮，可提高文字可读性。可创建进度条填充，让颜色从品牌色过渡到互补色调以指示完成程度。可通过结合渐变背景与使用 CSS background-clip 的透明内部区域，设计带微妙渐变边框的卡片组件。对于现代玻璃态（glassmorphism）效果，可在模糊背景之上叠加半透明渐变——渐变可为原本平淡的磨砂玻璃面板增添深度。