HTML Gradient Text
Web structure starts with solid HTML. Learn how HTML Gradient Text contributes to accessible and semantic web pages in the tutorial below.
This article will cover the topic of creating gradient text using HTML.
Gradient
A gradient is a smooth transition of colors from a starting point to an ending point.
Gradient Text
A gradient text refers to text that is enhanced with a blend of colors to enhance its appearance. This decorative technique adds visual appeal to websites, making them more visually engaging.
We can create gradient text utilizing the following functions:
- linear-gradient
- radial-gradient
- conic-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- repeating-conic-gradient
The functions mentioned above are employed to create a gradient effect on text and customize its style. They represent the parameters assigned to the background-image property to generate text with a gradient appearance.
We will comprehend these functions one by one.
linear-gradient
The linear-gradient function is responsible for specifying a gradual transition between colors from one shade to another. This function is commonly employed to establish a linear gradient background. It is essential to specify a minimum of two colors to facilitate the smooth color transition. The linear gradient property allows for the definition of the angle or direction, as well as the starting and ending points for the gradient.
Syntax:
background-image: linear-gradient([direction or angle], start-color [position] , . . . , last-color [position]);
The linear-gradient function accepts a direction or angle value, along with initial and final color values. The direction options include right, left, up, down, or diagonal orientations. Alternatively, the angle can be specified as 0deg, 90deg, 180deg, or 270deg. Both the starting and ending colors can be accompanied by an optional position specified in either a percentage or length format.
Demonstration of the linear-gradient function:
In this tutorial, we will generate a gradient text by leveraging the linear-gradient function.
Code:
<!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>
Output:
The output displayed below showcases a recurring gradient text generated using the linear-gradient function.
repeating-linear-gradient
The function repeating-linear-gradient is employed to establish a background with a repeating linear gradient.
Syntax:
background-image: repeating-linear-gradient([angle] / to [size-or-corner], start-color [position], . . . , last-color [position]);
The function repeating-linear-gradient takes in parameters such as angle/size-or-corner, initial color, and final color.
Illustration of the repeating-linear-gradient function:
In the upcoming demonstration, we will generate a gradient text using the repeating-linear-gradient function.
Code:
<!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>
Output:
The output displayed below showcases a gradient text that has been generated using the repeating-linear-gradient function.
radial-gradient
A radial gradient function is employed to establish a radial gradient backdrop, defined from its center point. It is essential to specify a minimum of two colors for the transition of colors.
Syntax:
background-image: radial-gradient([shape] [size] [position], start-color [position], . . . , last-color [position]);
The radial-gradient function accepts values for shape, dimensions, position, start point, and end point. The shape options include circle or ellipse. Dimensions may be specified as farthest-side, farthest-corner, closest-side, or closest-corner. By default, the position is set to the center. Color spreading can be controlled by specifying the color's degree of dispersion.
Demonstration of the radial-gradient function:
In this demonstration, we will create a gradient text using the radial-gradient function.
Code:
<!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>
Output:
In this output, we can observe a gradient text created using the radial-gradient function.
repeating-radial-gradient
The function repeating-radial-gradient is employed to specify a repeating radial gradient for the background.
Syntax:
background-image: repeating-radial-gradient ([shape] [size] [position], start-color [position], . . . , last-color [position]);
The function repeating-radial-gradient accepts parameters such as shape, dimensions, location, initial color, and final color.
Illustration of how to use the repeating-radial-gradient function:
In the provided demonstration, we will create a gradient text using the repeating-radial-gradient function.
Code:
<!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>
Output:
Below is the resulting display featuring a recurring gradient pattern created using the repeating-radial-gradient function.
conic-gradient
The conic-gradient function is used to represent a conic gradient.
Syntax:
The conic-gradient function in CSS is used to create conic gradients. It takes the following parameters:
- ```
<!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>
</head>
<body>
<h1>Below is a gradient text created utilizing the linear-gradient function:</h1>
It is a gradient text.
</body>
</html>
- ```
background-image: repeating-linear-gradient([angle] / to [size-or-corner], start-color [position], . . . , last-color [position]);
- ```
<!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>
</head>
<body>
<h1>Following is a gradient text built utilizing the repeating-linear-gradient function:</h1>
It is a gradient text.
</body>
</html>
- ```
background-image: radial-gradient([shape] [size] [position], start-color [position], . . . , last-color [position]);
This function allows developers to create visually appealing conic gradients on elements using CSS.
The conic-gradient function requires input values for angle, position, initial color, and final color. Color values can be specified with an optional position in degrees ranging from 0 to 360 or as percentages from 0% to 100%.
Demonstration of the conic-gradient function:
In this demonstration, we will create a conic gradient text using the conic-gradient function.
Code:
<!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>
Output:
Below is the result showcasing a conic gradient text.
repeating-conic-gradient
The function repeating-conic-gradient is used to display a repeating background with a conic gradient.
Syntax:
background-image: repeating-conic-gradient([angle] [position], start-color [degree], . . . , last-color [degree]);
The function repeating-conic-gradient accepts parameters such as angle, position, initial color, and final color.
Illustration of how to use the repeating-conic-gradient function:
In the following demonstration, we will create a gradient text using the repeating-conic-gradient function.
Code:
<!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>
Output:
The output showcases a recurring vertical gradient text created using the function repeating-conic-gradient.
Browsers support:
Following are the browsers that support the gradient functions:
- Google Chrome
- Safari
- Firefox
- Opera
- Microsoft Edge
Conclusion:
In this tutorial, we've explored HTML gradient text. We've learned that different gradient functions are employed to create gradient text. These functions include linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient, conic-gradient, and repeating-conic-gradient.
