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

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:

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.

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.

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.

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.

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.

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.

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.

Syntax:

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

Code:

Output:

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%.

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.

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.

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

Code:

Output:

### Browsers support:

Following are the browsers that support the gradient functions:

• Safari
• Firefox
• Opera
• Microsoft Edge