CSS Gradient

17 Mar 2025 | 6 分钟阅读

什么是渐变？

“CSS 渐变”一词指的是一种层叠样式表（CSS）方法，它能够在两种或多种颜色之间实现无缝过渡。它允许您为各种 CSS 属性添加渐变效果，包括文本、边框和背景。

使用 CSS 渐变，您可以指定颜色在圆形或椭圆形（径向渐变）的形状中或沿特定方向逐渐混合。渐变是通过定义至少两个颜色停止点或要混合的色调来定义的。

例如

下面展示了一个从蓝色变为绿色的线性渐变示例

.gradient-example {
  background: linear-gradient(to right, blue, green);
}

此示例中的 linear-gradient() 函数使用“to right”关键字指定渐变的方向。“Blue”和“Green”是渐变的起始颜色和结束颜色。

此外，您还可以指定更多颜色停止点来创建更复杂的渐变。

图解

以下是带有三个颜色停止点的径向渐变示例

.gradient-example {
  background: radial-gradient(circle, red, yellow, green);
}

在此示例中，使用 radial-gradient() 函数创建了一个圆形渐变。颜色“red”、“yellow”和“green”代表颜色停止点，而“circle”关键字指定了形状。

通过调整 CSS 渐变的方向、形状和颜色停止点，您可以创建各种视觉效果和过渡。由于现代网页浏览器广泛支持它们，因此它们是创建美观网站的强大工具。

我们为什么要在 CSS 中使用渐变？

借助渐变，我们可以更好地设计网站。使用 CSS 渐变的一些主要原因包括：

视觉吸引力：渐变可以增强网站或 Web 应用程序的视觉吸引力。它们允许您为元素添加深度并创建无缝的颜色过渡，从而增强其视觉吸引力。
背景：渐变常用于创建引人入胜且充满活力的背景效果。借助渐变，我们可以改变网站的外观和感觉，即使是微妙的渐变也能增添一丝流畅感，或者鲜艳的渐变也能吸引人们的目光。
按钮和图标：您可以使用渐变来为按钮和图标赋予光泽、三维的外观，使其脱颖而出并鼓励用户互动。
文本效果：通过将渐变应用于文本，您可以创建醒目的标题、副标题或其他特殊效果。渐变可以通过增加深度、投射阴影或突出特定段落来增强文本的视觉吸引力和引人注目的特质。
叠加和蒙版：渐变可以用作叠加或蒙版，以无缝地组合不同的图像或设计元素。这种方法通常用于在图像滑块、横幅或首屏部分中创建视觉上吸引人的过渡或效果。
品牌和主题：渐变可以在品牌的视觉识别中发挥重要作用。通过使用与品牌配色方案相complement的渐变，您可以实现整个网站的统一且一致的外观，从而增强品牌识别度。
响应式设计：渐变适合响应式设计，因为它们可以适应不同的屏幕尺寸和方向。为了在各种设备上提供一致的视觉体验，它们可以提供流畅的颜色过渡，这些过渡会根据可用空间进行调整。

总而言之，CSS 渐变为网页设计师提供了丰富的创意选择，使他们能够为设计增添深度、维度和视觉趣味。它们有助于开发独特且视觉上吸引人的用户界面，从而改善 Web 用户体验。

示例

下面是一个使用 CSS 渐变创建背景和文本效果的 HTML 程序示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-background {
      height: 200px;
      background: linear-gradient(to right, #ff0000, #00ff00);
    }
    
    .gradient-text {
      font-size: 24px;
      background: linear-gradient(to right, #ff0000, #00ff00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="gradient-background"></div>
  <h1 class="gradient-text">Hello, CSS Gradient!</h1>
</body>
</html>

说明

此示例中使用了 CSS 类 gradient-background 和 gradient-text。具有 gradient-background 类的 div 元素通过应用线性渐变背景，实现了从红色到绿色的水平渐变。

gradient-text 类将类似的线性渐变背景与独特的文本效果应用于 h1 标题元素。当将 -webkit-text-fill-color 和 -webkit-background-clip 属性分别设置为 text 和 transparent 时，文本将变得透明，并允许渐变背景显示出来。这会产生渐变填充文本的外观。

CSS 中的渐变类型

CSS 中有两种类型的渐变：

1. 线性渐变

在 CSS 中，线性渐变沿单个轴产生无缝的颜色变化。下面是一个线性渐变的程序示例和语法

以下语法

[angle]：指示渐变线的方向。可以使用度数（deg）或关键字（如 to top、bottom、left、right 等）来指定。
颜色停止点 1、2 等：指定颜色及其在渐变线上的位置。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to right, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 linear-gradient() 函数为具有 gradient-example 类的元素应用了线性渐变背景，并将其高度设置为 200 像素。渐变从左侧的红色 (#ff0000) 变为右侧的绿色 (#00ff00)。

输出

示例 2

以下是一个使用从上到下线性渐变作为背景的 HTML 程序示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to bottom, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 linear-gradient() 函数为具有 gradient-example 类的元素应用了线性渐变背景，并将其高度设置为 200 像素。渐变从顶部（#ff0000 红色）过渡到底部（#00ff00 绿色），如 bottom 关键字所示。

输出

示例 3

以下是一个使用从右到左线性渐变作为背景的 HTML 程序示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to left, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 linear-gradient() 函数为具有 gradient-example 类的元素应用了线性渐变背景，并将其高度设置为 200 像素。根据 top left 关键字，渐变从右侧的红色 (#ff0000) 开始，过渡到左侧的绿色 (#00ff00)。

输出

2. 径向渐变

圆形或椭圆形径向渐变会过渡颜色。它产生从中心点向外扩散的无缝颜色变化。

[shape]：指定渐变的形状。可能的形状包括 circle、ellipse、nearest、closest-corner、farthest-side 和 farthest-corner。
颜色停止点 1、2 等：定义颜色及其在形状内的位置。

示例

以下是一个使用径向渐变作为背景的 HTML 程序示例

 <!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(circle, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 radial-gradient() 函数应用了径向渐变背景，并将具有 gradient-example 类的元素的高度和宽度设置为 200 像素。渐变是圆形的，从中心（#ff0000 红色）变为边缘（#00ff00 绿色）。

输出

示例 2

以下是一个使用具有均匀形状颜色停止点的径向渐变的 HTML 程序示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(circle at center, #ff0000 0%, #00ff00 33.3%, #0000ff 66.6%);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 radial-gradient() 函数应用了径向渐变背景，并将具有 gradient-example 类的元素的高度和宽度设置为 200 像素。渐变位于元素的中心，形状为圆形。有三个均匀间隔的颜色停止点

红色是 0% 处的颜色停止点 (#ff0000)。

在 33.3% 处，颜色停止点是绿色 (#00ff00)。

在 66.6% 处，颜色停止点是蓝色 (#0000ff)。

输出

示例 3

以下是一个使用具有不同形状颜色停止点的径向渐变的 HTML 程序示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(ellipse closest-side at 50% 50%, #ff0000 20%, #00ff00 50%, #0000ff 80%);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

此示例使用 radial-gradient() 函数应用了径向渐变背景，并将具有 gradient-example 类的元素的高度和宽度设置为 200 像素。渐变是距离元素顶部左侧 50%、右侧 50% 的椭圆。有三个颜色停止点。

在 20% 处，颜色停止点是红色 (#ff0000)。

绿色 (#00ff00) 是 50% 处的颜色停止点。

蓝色 (#0000ff) 是 80% 处的颜色停止点。

输出

下一个主题CSS z-index

CSS Gradient

什么是渐变？

图解

我们为什么要在 CSS 中使用渐变？

示例

CSS 中的渐变类型

1. 线性渐变

2. 径向渐变

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Gradient

什么是渐变？

图解

我们为什么要在 CSS 中使用渐变？

示例

CSS 中的渐变类型

1. 线性渐变

2. 径向渐变

相关帖子

CSS 2D Transforms

flex-shrink property

flex-grow property

CSS Loader

flex-basis property

flex-flow property

CSS flex property

CSS z-index

CSS Tooltips

CSS translate

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器