CSS Gradients

CSS gradients are a helpful feature for creating smooth transitions between two or more colors on webpage elements without relying on images. In this tutorial, you will learn how to create and customize different types of CSS gradients.

Types of CSS Gradients

Linear Gradient

Linear gradient is the most common type of CSS gradient. The linear-gradient() function generates a linear gradient. The function takes two or more color stops as arguments and the colors transition from one stop to the next along a straight line.

The color stops can be defined by specifying a color and a position. The position can be specified as a percentage or as a keyword, like to top, to bottom, to left, or to right.

For example, the following CSS code creates a linear gradient from coral to salmon that starts at the top and goes down:

background-image: linear-gradient(coral, salmon);

Output:

CSS Gradient Background

You can also use keywords to control the direction of the gradient. For instance, the following CSS code creates a linear gradient that begins from the left and moves towards the right:

background-image: linear-gradient(to right, lightgreen, skyblue);

Output:

CSS Linear Gradient Background

You can also specify multiple color stops. For instance, the following CSS code creates a linear gradient from coral to salmon to orange to gold at equal intervals:

background-image: linear-gradient(coral, salmon, orange, gold);

Output:

CSS Linear Gradient Background

You can also set an angle to rotate the gradient line. For example, the following CSS code creates a linear gradient that is rotated 45 degrees:

background-image: linear-gradient(45deg, lightgreen, darkgreen);

Output:

CSS Linear Gradient Background

Radial Gradient

The Radial gradient transitions from a specific point and radiates outwards. The radial-gradient() function generates a radial gradient. This function takes two or more color stops as arguments, and the colors transition from one stop to the next in a circular pattern.

The color stops can be defined by specifying a color and a position. The position can be specified as a percentage or as a keyword, like center, top, bottom, left, or right.

For example, the following CSS code creates a radial gradient from salmon to orange, with the center point at the top left corner and the shape and size of a circle:

background: radial-gradient(circle, peachpuff, orange);

Output:

CSS Radial Gradient Background

You can also use keywords to control the shape and size of the radial gradient. For instance, the following CSS code creates a radial gradient that is shaped like an ellipse:

background: radial-gradient(ellipse, lavender, purple);

Output:

CSS Radial Gradient Background

Conic Gradients

The conic-gradient() function creates gradients that rotate around a central point. This function takes two or more color stops as arguments, and the colors transition from one stop to the next in a circular pattern around the center point.

The color stops can be defined by specifying a color and a position. The position can be specified as a percentage or keyword like 0deg, 90deg, 180deg, or 270deg.

For example, the following CSS code creates a conic gradient from coral to salmon, with the center point at the top left corner and the gradient starting at 0 degrees:

background-image: conic-gradient(lightgreen, skyblue, darkblue);

Output:

CSS Conic Gradient Background

You can also set an angle to rotate the conic gradient. For example, the following CSS code creates a conic gradient that is rotated 45 degrees:

background-image: conic-gradient(from 45deg, lightgreen, skyblue, darkblue);

Output:

CSS Conic Gradient Background

Conclusion

CSS gradient is a helpful feature for creating beautiful web designs. By following the examples in this tutorial, you can learn how to create and use CSS gradients effectively.