当前位置：首页 > CSS

css制作渐变背景

2026-04-02 13:00:21CSS

使用线性渐变

通过linear-gradient()函数可以创建线性渐变背景。该函数接受方向参数和颜色停止点。

background: linear-gradient(to right, #ff9966, #ff5e62);

方向参数可以是角度（如90deg）或关键词（如to top right）。颜色停止点可以设置多个，并指定位置：

background: linear-gradient(45deg, #ff9966 0%, #ff5e62 50%, #cc2b5e 100%);

使用径向渐变

radial-gradient()创建从中心点向外辐射的渐变效果。可定义形状、大小和颜色分布。

background: radial-gradient(circle at center, #ff9966, #ff5e62);

添加形状和大小参数：

background: radial-gradient(ellipse farthest-corner at 30% 60%, #ff9966, #ff5e62);

重复渐变

repeating-linear-gradient和repeating-radial-gradient实现图案化重复效果。

background: repeating-linear-gradient(
  45deg,
  #ff9966,
  #ff9966 10px,
  #ff5e62 10px,
  #ff5e62 20px
);

结合多个渐变

通过逗号分隔可叠加多个渐变背景。

background: 
  linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.3)),
  radial-gradient(circle, #ff9966, #ff5e62);

浏览器兼容性处理

添加前缀确保兼容旧版浏览器：

background: -webkit-linear-gradient(left, #ff9966, #ff5e62);
background: -moz-linear-gradient(left, #ff9966, #ff5e62);
background: linear-gradient(to right, #ff9966, #ff5e62);

渐变与背景混合

使用background-blend-mode实现渐变与图像的混合效果：

background: 
  linear-gradient(to right, #ff9966, #ff5e62),
  url('image.jpg');
background-blend-mode: overlay;

使用CSS变量动态控制

通过CSS变量实现动态渐变效果：

css制作渐变背景

:root {
  --gradient-start: #ff9966;
  --gradient-end: #ff5e62;
}
.element {
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}