CSS Gradients

CSS Gradients allow you to create smooth transitions between two or more colors, which can be used as background images for elements. They provide a versatile way to add color effects without needing separate image files.

Types of CSS Gradients

CSS supports two main types of gradients:

• Linear Gradients: Gradients that transition along a straight line.
• Radial Gradients: Gradients that radiate outward from a central point.

Linear Gradients

Linear gradients transition along a straight line. You can specify the direction of the gradient and the colors to transition between.

/* Linear Gradient Syntax */
background: linear-gradient(, , , ...);

        

/* Simple Linear Gradient */
.linear-gradient-example {
    background: linear-gradient(to right, #ff0000, #0000ff);
}

            

Radial Gradients

Radial gradients radiate outward from a central point. You can control the position and shape of the gradient.

/* Radial Gradient Syntax */
background: radial-gradient(  at , , , ...);

        

/* Radial Gradient */
.radial-gradient-example {
    background: radial-gradient(circle, #ff0000, #0000ff);
}

            

Gradient Functions

You can use various functions to customize gradients:

• linear-gradient: Creates a linear gradient.
• radial-gradient: Creates a radial gradient.
• conic-gradient: Creates a conic gradient (less common).

/* Conic Gradient */
.conic-gradient-example {
    background: conic-gradient(#ff0000, #0000ff);
}