如何创建 CSS 渐变

CSS 渐变允许创建平滑的颜色过渡而无需图片文件。它们比图像轻量，可在任意屏幕尺寸下完美缩放，并易于自定义。

CSS 渐变类型

线性渐变· 颜色沿直线过渡（上下、左右或任意角度）。

background: linear-gradient(135deg, #667eea, #764ba2);

径向渐变· 颜色以圆形或椭圆形从中心点向外辐射。

background: radial-gradient(circle, #667eea, #764ba2);

锥形渐变· 颜色围绕中心点旋转，像色环一样。

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

如何可视化创建渐变

1. 选择渐变类型· 选择线性或径向，并设置角度或位置。
2. 添加色标· 点击在渐变的不同位置添加颜色。调整每种颜色及其位置。
3. 复制 CSS· 复制生成的代码并粘贴到您的样式表中。

使用可视化生成器比手写语法更快，尤其是使用多个色标时。

常见渐变模式

Hero 区块背景· 柔和的双色渐变能增加深度而不分散对文字的注意。

background: linear-gradient(135deg, #0f172a, #1e3a5f);

按钮高光· 细微渐变赋予按钮立体感。

background: linear-gradient(180deg, #3b82f6, #2563eb);

图片遮罩· 渐变遮罩能提升照片上文字的可读性。

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

强调边框· 使用渐变作为边框可带来视觉亮点。

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

小贴士

• 保持细腻· 最好的渐变几乎看不见。两个相近颜色之间的轻微过渡能增添深度。夸张的彩虹渐变很少看起来专业。
• 用渐变代替图片· CSS 渐变即刻加载，无需网络请求。尽可能用渐变替换装饰性的背景图片。
• 在暗色模式下测试· 在浅色背景下看起来不错的渐变在暗色模式下可能褪色或冲突。如有需要，为每个主题定义不同的渐变。
• 注意文字对比度· 在渐变上放文字时，确保文字在整个渐变范围内都可读，而不仅仅是最亮或最暗处。