图解CSS渐变

小肚肚肚肚肚哦
703 阅读7分钟

一、渐变的前世今生

1.1 数字设计的色彩革命

在 Web 1.0 时代，设计师们为了实现渐变效果不得不采用切割图片拼贴的方式。一张简单的渐变背景可能需要切割成多个切片，既影响性能又难以维护。

2010年 CSS3 的诞生彻底改变了这一局面，W3C 在 CSS Image Values and Replaced Content Module Level 3 中首次正式定义了渐变语法。

1.2 渐变规范的演进路线

  • 2011年：线性/径向渐变草案发布
  • 2017年：重复渐变加入标准
  • 2020年：锥形渐变进入Editor's Draft阶段
  • 2022年：CSS Images Level 4新增更多控制参数

二、渐变核心概念全景解析

2.1 渐变类型矩阵

类型核心特征兼容性性能指数
线性渐变直线方向色彩过渡全浏览器支持★★★★★
径向渐变圆心向外扩散IE10+★★★★☆
锥形渐变360度环形过渡Chrome 69+★★★☆☆
重复渐变图案重复平铺IE10+★★★★☆

2.2 浏览器兼容性详情

image.png

image.png

image.png

image.png

三、四大渐变类型深度剖析

3.1 线性渐变（Linear Gradient）

语法：

linear-gradient([<angle> | to <side-or-corner>], <color-stop-list>)

参数说明：

  • <angle> 或 to <side-or-corner>：定义渐变线的方向。
    • <angle>：以度数表示的角度，范围从 0deg 到 360deg 顺时针旋转，0deg 表示向上，90deg 表示从左到右，180deg 表示向下，270deg 表示从右到左。
    • to <side-or-corner>：使用方向关键字，如 to right（从左到右）、to top left（从右下角到左上角）等。
  • <color-stop-list>：颜色停顿点的列表，每个停顿点由颜色和可选的位置组成。位置可以是百分比或长度值，表示颜色过渡的起始或结束位置。也可以不指定每个颜色的位置，这样就会平均分配位置。

极坐标控制法 <angle>：

方向示意图：

image.png

实际案例：

// 从左上角到右下角
.element {
  background: linear-gradient(45deg, 
    #ff6b6b 0%,  // 红色
    #4ecdc4 50%, 
    #45b7d1 100% // 青色
  );
}

image.png

边角关键字法 to <side-or-corner>：

// 到左上角，意思是从右下角开始直线斜向上
.advanced-bg {
  background: linear-gradient(to left top, 
    rgba(255,0,0,0.8) 20px,
    rgba(0,255,0,0.5) calc(20px + 10%),
    rgba(0,0,255,0.3)
  );
}

image.png

3.2 径向渐变（Radial Gradient）

声明

radial-gradient([<shape> <size> at <position>], <color-stop-list>)

参数说明：

  • <shape>：渐变的形状，默认为 ellipse（椭圆），此时可以在后边追加椭圆的范围。可以指定为 circle（圆形）。
  • <size>：渐变的大小，默认为 farthest-corner。可选值包括：
    • closest-side：渐变的半径为距离中心最近的边的距离。
    • closest-corner：渐变的半径为距离中心最近的角的距离。
    • farthest-side：渐变的半径为距离中心最远的边的距离。
    • farthest-corner：渐变的半径为距离中心最远的角的距离。
  • at <position>：渐变的中心位置，默认为元素的中心。可以使用关键字（如 center、top left）或长度值 (width height)（如 50% 50%）来指定。
  • <color-stop-list>：颜色停顿点的列表，格式与 linear-gradient 相同。

方向示意图：

image.png

实际案例：

椭圆渐变：

.bg {
  background: radial-gradient(
    ellipse at 70% 30%, // 中心点在宽 70%，高 30% 的位置
    blue 10%,
    yellow 40%,
    red 70%,
    #000 95%
  );
}

image.png

椭圆渐变 - 设置长轴和短轴：

.bg {
  background: radial-gradient(
    ellipse 100% 80% at 70% 30%, // 中心点在宽 70%，高 30% 的位置
    blue 10%,
    yellow 40%,
    red 70%,
    #000 95%
  );
}

此时椭圆横轴覆盖范围 100% 宽度，短轴覆盖范围 80% 高度，空余的位置用最后一个颜色补齐：

image.png

尺寸控制：

closest-side:

.spotlight {
  background: radial-gradient(
    circle closest-side at 80% 20%,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.1) 100%
  );
}

image.png

closest-corner (代码同上)：

image.png

farthest-side (代码同上)：

image.png

farthest-corner (代码同上)：

image.png

3.3 锥形渐变（Conic Gradient）

声明

conic-gradient([from <angle>] [at <position>], <color-stop-list>)

参数说明：

  • from <angle>：渐变的起始角度，默认为 0deg，顺时针布局。指定从哪个角度开始渐变。
  • at <position>：渐变的中心位置，默认为元素的中心。可以使用关键字（如 center、top left）或长度值（如 `50% 50%）来指定。
  • <color-stop-list>：颜色停顿点的列表，格式与 linear-gradient 相同。

方向示意图：

image.png

有了上面的经验，相信下面的代码就不难理解了：

时钟效果：

.clock {
  background: conic-gradient(
    from -90deg at 50% 50%,
    red 0deg 30deg,
    orange 30deg 60deg,
    yellow 60deg 90deg,
    green 90deg 150deg,
    blue 150deg 240deg,
    purple 240deg 360deg // 即使这里没有写到 360deg，浏览器也会自动补全颜色
  );
}

image.png

当然了，deg 这个单位，也可以使用 rad 弧度、 turn转数来替代。deg = rad * (180 / π)

上面的例子，接缝处刚好能够对齐，因此看不出渐变的效果，我们调整一下相邻颜色的间距，使其保留一定的距离：

.clock {
  background: conic-gradient(
    from -90deg at 50% 50%,
    red 0deg 20deg,
    orange 30deg 40deg,
    yellow 60deg 70deg,
    green 90deg 100deg,
    blue 150deg 200deg,
    purple 240deg 350deg
  );
}

image.png

3.4 重复渐变（Repeating Gradient）

声明

repeating-linear-gradient([<angle> | to <side-or-corner>], <color-stop-list>)

repeating-radial-gradient 用法同 radial-gradient

参数说明：

  • <angle> 或 to <side-or-corner>：定义渐变线的方向，参数含义与 linear-gradient 相同。
  • <color-stop-list>：颜色停顿点的列表，格式与 linear-gradient 类似，但略有不同，每一种颜色要指明开始距离和结束距离。

线性重复渐变方向示意图：

image.png

条纹背景：

定义一个透明背景，从0开始持续20px，接着定义一个黑色半透明背景，从 20px开始，到40px。剩余空间就会自动重复上面的模式：

.zebra {
  background: repeating-linear-gradient(
    30deg,
    transparent 0 20px,
    rgba(0,0,0,0.1) 20px 40px
  );
}

image.png

波纹：

这里定义渐变颜色不需要定义到 100%，浏览器会自动重复之前的渐变模式：

.water-effect {
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(0,212,255,0.8) 0%,
    rgba(9,9,121,0.6) 10%,
    transparent 20%
  );
  background-size: 200% 200%;
}

image.png

渐变还能被用在 border-image、list-style-image、mask-image、text-fill-color、box-shadow、filter 等 css 属性中

四、现代应用场景实战

4.1 渐变按钮

button {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  border: none;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: linear-gradient(135deg, #feb47b, #ff7e5f);
}

image.png

4.2 css 流光背景

css 边框流光效果

image.jpg

4.3 渐变进度条

/* 渐变进度条 */
.progress-bar {
  width: 400px;
  height: 20px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
}

使用时，width 可以作为 css 变量传入

image.png

4.4 文字剪切背景

h1 {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

image.png

4.5 可滚动区域的视差背景

背景不随页面滚动：

/* 滚动背景 */
body {
  background: linear-gradient(180deg, #74ebd5 0%, #9face6 100%);
  background-attachment: fixed;
  background-size: cover;
  height: 2000px;
}

image.png

此外，渐变背景还可以与图片叠加： background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.7)), url('background-image.jpg');

五、性能优化指南

  1. GPU加速策略：
.optimized-gradient {
  transform: translateZ(0);
  will-change: background;
}
  1. 复合渐变计算：
/* 不推荐 */
.element {
  background: 
    linear-gradient(...),
    radial-gradient(...),
    conic-gradient(...);
}

/* 推荐方案 */
.gradient-mask {
  mask: linear-gradient(...);
  background: radial-gradient(...);
}
  1. 动态更新策略：
function optimizeGradient(element) {
  let observer = new MutationObserver(() => {
    element.style.background = generateGradient();
    element.style.transform = 'translateZ(0)';
  });
  observer.observe(element, { attributes: true });
}

六、未来趋势展望

6.1 CSS Houdini渐变

CSS.paintWorklet.addModule('gradient-worklet.js');

// gradient-worklet.js
registerPaint('advancedGradient', class {
  static get inputProperties() { return ['--gradient-config']; }
  
  paint(ctx, size, props) {
    const config = JSON.parse(props.get('--gradient-config'));
    // 自定义绘制逻辑
  }
});

6.2 参数化渐变函数

:root {
  --main-gradient: linear-gradient(
    var(--angle, 45deg),
    color-mix(in oklab, #f00, var(--mix-color)) 30%,
    hsl(var(--hue) 80% 50%)
  );
}

.element {
  --angle: 90deg;
  --mix-color: #00f;
  --hue: 120;
  background: var(--main-gradient);
}

结语

从简单的背景填充到复杂的动态效果，CSS渐变已经成为现代Web设计的核心武器。掌握渐变的本质原理和最新特性，开发者可以：

  1. 减少不必要的图像请求
  2. 实现响应式动态效果
  3. 创造独特的视觉语言
  4. 提升用户体验的流畅度

随着CSS规范的持续演进，渐变技术正在向参数化、可编程的方向发展。可以持续关注W3C渐变规范更新，在项目中实践新型渐变方案，同时注意平衡视觉效果与性能表现。

avatar
文章
阅读
粉丝