HTML 渐变文本

17 Mar 2025 | 5 分钟阅读

本文将讨论 HTML 渐变文本。

渐变

渐变是指颜色从开始点到结束点的连续变化。

渐变文本

用渐变色填充以装饰文本的文本称为渐变文本。渐变文本可以装饰网页，使其看起来更具吸引力。

我们可以利用以下函数创建渐变文本

linear-gradient()
radial-gradient()
conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()

以上函数用于创建渐变文本并为文本设置样式。这些函数是为 background-image 属性提供的值，用于创建渐变文本。

我们将逐一理解这些函数。

linear-gradient()

linear-gradient() 是一个函数，它定义了颜色从一种颜色到另一种颜色的缓慢变化。它用于设置线性渐变背景。我们必须定义至少两种颜色来进行颜色过渡。我们可以在线性渐变属性中定义角度/方向、起点和终点。

语法

background-image: linear-gradient([direction or angle], start-color [position] , . . . , last-color [position]);

linear-gradient() 函数接受方向或角度值、开始颜色和最后颜色值。方向可以是右、左、上、下或对角线。角度可以是 0deg、90deg、180deg 和 270deg。开始颜色和最后颜色可以提供可选的位置，以百分比或长度表示。

linear-gradient() 函数演示

在此演示中，我们将利用 linear-gradient() 函数创建一个渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing the linear-gradient() function to create a gradient text</title>
    <style>
        .linear-gradient {
            background-image: linear-gradient(to right, #40b43a, #c01111,#9c4fe9);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <h1>Below is a gradient text created utilizing the linear-gradient() function:</h1>
    <p class="linear-gradient">It is a gradient text.</p>
</body>
</html>

输出

在下面的输出中，我们可以看到一个使用 linear-gradient() 函数创建的重复渐变文本。

repeating-linear-gradient()

repeating-linear-gradient() 是用于设置重复线性渐变背景的方法。

语法

background-image: repeating-linear-gradient([angle] / to [size-or-corner], start-color [position], . . . , last-color [position]);

repeating-linear-gradient() 接受角度/尺寸或角落、开始颜色和最后颜色值。

repeating-linear-gradient() 函数演示

在接下来的演示中，我们将使用 repeating-linear-gradient() 函数制作一个渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing the repeating-linear-gradient() function to make a gradient text</title>
    <style>
        .repeating-linear-gradient {
            background-image: repeating-linear-gradient(45deg, purple, yellow, brown 5%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            text-align: center;
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: 900;
            font-family: 'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <h1>Following is a gradient text built utilizing the repeating-linear-gradient() function:</h1>
    <p class="repeating-linear-gradient">It is a gradient text.</p>
</body>
</html>

输出

在下面的输出中，我们可以看到一个使用 repeating-linear-gradient() 函数创建的渐变文本。

radial-gradient()

径向渐变是一个函数，用于设置径向渐变背景。它通过中心点定义。我们必须定义至少两种颜色来进行颜色过渡。

语法

background-image: radial-gradient([shape] [size] [position], start-color [position], . . . , last-color [position]);

radial-gradient() 函数接受形状、尺寸、位置、起点和终点值。形状可以是圆形或椭圆形。尺寸可以是 farthest-side、farthest-corner、closest-side 或 closest-corner。默认位置是中心。颜色可以提供展开颜色的程度。

radial-gradient() 函数演示

在下面的演示中，我们将使用 radial-gradient() 函数构建一个渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing the radial-gradient() function to build a gradient text</title>
    <style>
        .radial-gradient {
            background-image: radial-gradient(circle, #6314a8 25%, #fa4bc3);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            text-align: center;
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: 900;
            font-family:'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <h1>Following is a gradient text constructed with the help of the radial-gradient() function:</h1>
    <p class="radial-gradient">It is a gradient text.</p>
</body>
</html>

输出

在这里的输出中，我们可以看到一个使用 radial-gradient() 函数构建的渐变文本。

repeating-radial-gradient()

repeating-radial-gradient() 函数用于为重复的径向渐变定义背景。

语法

background-image: repeating-radial-gradient ([shape] [size] [position], start-color [position], . . . , last-color [position]);

repeating-radial-gradient() 接受形状、尺寸、位置、开始颜色和最后颜色。

repeating-radial-gradient() 函数演示

在下面的演示中，我们将使用 repeating-radial-gradient() 函数构建一个渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing the repeating-radial-gradient() method and making a gradient text</title>
    <style>
        .repeating-radial-gradient {
            background-image: repeating-radial-gradient(circle, red 10%, green 15%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            text-align: center;
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: 900;
            font-family:'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <h1>Following is a gradient text constructed with the assistance of the repeating-radial-gradient() function:</h1>
    <p class="repeating-radial-gradient">It is a gradient text.</p>
</body>
</html>

输出

以下是输出，我们可以看到一个使用 repeating-radial-gradient() 函数制作的重复渐变文本。

conic-gradient()

conic-gradient() 是用于描述圆锥渐变的函数。

语法

background-image: conic-gradient([angle] [position], start-color [degree], . . . , last-color [degree]);

conic-gradient() 函数接受角度、位置、开始颜色和最后颜色值。颜色值可以提供可选的位置，以 0 到 360 度或 0% 到 100% 的百分比表示。

conic-gradient() 函数演示

在接下来的演示中，我们将使用 conic-gradient() 函数制作一个圆锥渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilization of the conic-gradient() function to construct a gradient text</title>
    <style>
        .conic-gradient {
            background-image: conic-gradient(red, yellow, #fa4bc3);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            text-align: center;
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: 900;
            font-family:'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <h1>Below is a gradient text constructed utilizing the conic-gradient() function:</h1>
    <p class="conic-gradient">It is a gradient text.</p>
</body>
</html>

输出

这是输出，我们可以看到一个圆锥渐变文本。

repeating-conic-gradient()

repeating-conic-gradient() 是用于说明重复圆锥渐变背景的方法。

语法

background-image: repeating-conic-gradient([angle]  [position], start-color [degree], . . . , last-color [degree]);

repeating-conic-gradient() 接受角度、位置、开始颜色和最后颜色值。

repeating-conic-gradient() 函数演示

在下面的演示中，我们将使用 repeating-conic-gradient() 函数来制作一个渐变文本。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilization of the repeating-conic-gradient() function to make a gradient text</title>
    <style>
        .repeating-conic-gradient {
            background-image: repeating-conic-gradient(brown, pink, orange);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            }

        p {
            text-align: center;
            margin: 10px;
            padding: 10px;
            font-size: 50px;
            font-weight: 900;
            font-family:'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <h1>Following is a gradient text created utilizing the repeating-conic-gradient() function:</h1>
    <p class="repeating-conic-gradient">It is a gradient text.</p>
</body>
</html>

输出

在下面的输出中，我们可以看到一个使用 repeating-conic-gradient() 函数制作的重复渐变文本。

浏览器支持

以下是支持渐变函数的浏览器：

谷歌浏览器
Safari
火狐
Opera
Microsoft Edge

结论

在本文中，我们理解了HTML 渐变文本。我们已经了解到，各种渐变函数用于创建渐变文本。渐变函数有linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()、conic-gradient() 和 repeating-conic-gradient()。

下一主题HTML 计时器

HTML 渐变文本

渐变

渐变文本

linear-gradient()

repeating-linear-gradient()

radial-gradient()

repeating-radial-gradient()

conic-gradient()

repeating-conic-gradient()

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

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

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 渐变文本

渐变

渐变文本

linear-gradient()

repeating-linear-gradient()

radial-gradient()

repeating-radial-gradient()

conic-gradient()

repeating-conic-gradient()

浏览器支持

结论

相关帖子

HTML class 属性

HTML 扩展名

如何在 HTML 中添加线条

HTML 符号代码

如何在 HTML 中静音视频

哪个内联属性用于指定样式

HTML 表格生成器

HTML 输入元素

如何创建 Discord 机器人

HTML 和 CSS 中的自动图片滑块

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器