CSS Background Gradient Color Example

Using gradients in CSS allows you to create smooth transitions between two or more colors. Gradients can add a nice visual effect to your website's background.

Linear Gradient

A linear gradient transitions colors along a straight line.

body {
    background: linear-gradient(to right, red, yellow);
}

In this example, the background transitions from red to yellow from left to right.

Radial Gradient

A radial gradient transitions colors from the center outwards in a circular pattern.

body {
    background: radial-gradient(circle, blue, green);
}

This example creates a gradient that starts with blue at the center and transitions to green at the edges.

Using Multiple Color Stops

You can add multiple color stops to your gradient to create more complex transitions.

body {
    background: linear-gradient(to bottom, red, yellow, green, blue);
}

Here, the background transitions through red, yellow, green, and blue from top to bottom.

Repeating Gradients

Repeating gradients repeat the gradient pattern.

body {
    background: repeating-linear-gradient(
        45deg,
        yellow,
        yellow 10px,
        black 10px,
        black 20px
    );
}

This example creates a diagonal repeating gradient with stripes of yellow and black.

Examples in Action

Here are some more examples of gradients in CSS:

Diagonal Gradient

body {
    background: linear-gradient(135deg, orange, purple);
}

This creates a diagonal gradient from the top left to the bottom right corner.

Gradient with Transparency

body {
    background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}

This gradient transitions from semi-transparent red to semi-transparent blue.

Radial Gradient with Multiple Colors

body {
    background: radial-gradient(circle, red, yellow, green, blue);
}

This example creates a circular gradient with multiple colors.

Conclusion

CSS gradients are a powerful tool for adding depth and color transitions to your web designs. Experiment with different types of gradients and color stops to create unique and visually appealing backgrounds for your website.