CSS Background Gradient

CSS background-image can also be used to create background gradients. Gradients are smooth transitions between two or more colors. CSS provides different gradient functions that allow you to create gradient backgrounds.

Linear Gradient

        
            body {
    background-image: linear-gradient(to right, #ff0000, #00ff00);
}
        
    

This creates a linear gradient from red (#ff0000) to green (#00ff00) from left to right.

Radial Gradient

        
            body {
    background-image: radial-gradient(circle, #ff0000, #00ff00);
}
        
    

This creates a radial gradient from red to green, starting from the center and expanding outward in a circular shape.

Repeating Linear Gradient

        
            body {
    background-image: repeating-linear-gradient(to right, #ff0000, #00ff00);
}
        
    

This creates a repeating linear gradient that repeats the specified colors in a continuous pattern from left to right.

Multiple Gradients

        
            body {
    background-image: linear-gradient(to right, #ff0000, #00ff00), radial-gradient(circle, #0000ff, #ffff00);
}
        
    

This creates multiple gradients, combining a linear gradient and a radial gradient as the background.

You can customize the gradient direction, colors, and shape by adjusting the parameters within the gradient functions. Gradients allow you to create visually appealing backgrounds with smooth color transitions.