HTML Gradient Text

We will discuss the HTML gradient text in this article.

Gradient

A gradient is a continuation of colors with a beginning and ending point.

Gradient Text

The text which is filled with gradient colour to decorate the text is called a gradient text. Gradient text decorates the web page and makes it look more attractive.

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 above functions are used to make it a gradient text and give the style to the text. These functions are the values which are given to the background-image property for creating the gradient text.

We will comprehend these functions one by one.

linear-gradient()

A linear-gradient() is the function that defines the slow change in the colors from one color to another color. It is used to set the linear gradient background. We must define at least two colors for the color transition. We can define the angle/ direction, starting point and ending point in the linear gradient property.

Syntax:

The linear-gradient() function takes direction or angle value, start color and last color values. The direction can be right, left, up, down or diagonally. The angle can be 0deg, 90deg, 180deg and 270deg. The start color and last color are provided with an optional position in percentage or length.

Demonstration of the linear-gradient() function:

We will create a gradient text utilizing the linear-gradient() function in this demonstration.

Code:

Output:

We can witness a repeating gradient text in the output below created utilizing the linear-gradient() function.

repeating-linear-gradient()

The repeating-linear-gradient() is the method which is utilized to set the repeating linear gradient background.

Syntax:

The repeating-linear-gradient() accepts angle/ size-or-corner, start-color and last-color values.

Demonstration of the repeating-linear-gradient() function:

We will make a gradient text with the assistance of the repeating-linear-gradient() function in the following demonstration.

Code:

Output:

We can witness a gradient text in the output below created utilizing the repeating-linear-gradient() function.

radial-gradient()

A radial gradient is a function that is utilized to set the radial gradient background. It is defined through the center. We must define at least two colors for the color transition.

Syntax:

The radial-gradient() function takes shape, size, position, starting point and ending point values. The shape can be a circle or an ellipse. The size can be farthest-side, farthest-corner, closest-side or closest-corner. The position is the center by default. The colors can be provided with the degree of spreading the color.

Demonstration of the radial-gradient() function:

We will build a gradient text with the assistance of the radial-gradient() function in the following demo.

Code:

Output:

Here in the output we can witness a gradient text constructed with the assistance of radial-gradient() function.

repeating-radial-gradient()

The repeating-radial-gradient() function is utilized to define the background to a repeating radial gradient.

Syntax:

The repeating-radial-gradient() takes shape, size, position, start-color and last-color.

Demonstration of the repeating-radial-gradient() function:

We will construct a gradient text with the assistance of the repeating-radial-gradient() function in the demo given below.

Code:

Output:

Here is the output downwards where we can witness a repeating gradient text made with the assistance of the repeating-radial-gradient() function.

conic-gradient()

A conic-gradient() is the function that is utilized to depict the conic gradient.

Syntax:

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

The conic-gradient() function takes angle, position, start-color and last-color values. Color values are provided with the optional position in degrees between 0 and 360 or percentages between 0% and 100%.

Demonstration of the conic-gradient() function:

We will make a conic gradient text by utilizing the conic-gradient() function In the following demonstration.

Code:

Output:

Here is the output in which we can witness a conic gradient text.

repeating-conic-gradient()

The repeating-conic-gradient() is the method which is utilized to illustrate the repeating conic gradient background.

Syntax:

The repeating-conic-gradient() takes angle, position, start-color and last-color values.

Demonstration of the repeating-conic-gradient() function:

We will be forming a gradient text with the assistance of the repeating-conic-gradient() function in the demo below.

Code:

Output:

We can witness a repeating gradient text in the output downwards made utilizing the repeating-conic-gradient() function.

Browsers support:

Following are the browsers that support the gradient functions:

• Google Chrome
• Safari
• Firefox
• Opera
• Microsoft Edge

Conclusion:

We have understood the HTML gradient text in this article. We have understood that various gradient functions are utilized to make the gradient text. The gradient functions are linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient() and repeating-conic-gradient().