当前位置：首页 > CSS

css制作上下渐变

2026-03-12 08:25:54CSS

使用 `linear-gradient` 创建上下渐变

在 CSS 中，可以通过 background 或 background-image 属性结合 linear-gradient 函数实现上下方向的渐变效果。linear-gradient 的默认方向是从上到下（to bottom），因此直接使用即可。

.element {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

自定义渐变颜色和方向

调整渐变的起始颜色和结束颜色，或改变方向为从下到上（to top）：

.element {
  /* 从下到上的渐变 */
  background: linear-gradient(to top, #00ff00, #ffff00);
}

添加多个颜色节点

在渐变中插入多个颜色节点，实现更复杂的渐变效果：

.element {
  background: linear-gradient(to bottom, 
    #ff0000 0%, 
    #00ff00 50%, 
    #0000ff 100%
  );
}

使用角度控制渐变方向

通过角度（如 180deg 表示从上到下）替代方向关键词：

.element {
  background: linear-gradient(180deg, #ff0000, #0000ff);
}

兼容性前缀

为支持旧版浏览器，可添加供应商前缀：

.element {
  background: -webkit-linear-gradient(top, #ff0000, #0000ff);
  background: -moz-linear-gradient(top, #ff0000, #0000ff);
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

应用到文本渐变

通过 background-clip 和 text-fill-color 实现文本渐变效果：

css制作上下渐变

.text-gradient {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}