CSS Gradients

CSS Gradients allow you to create smooth color transitions without using images. There are three main types of gradients in CSS: linear gradients, radial gradients, and conic gradients.

1. Linear Gradients

A linear gradient transitions colors along a straight line. You can define the direction and color stops.

.gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    width: 300px;
    height: 150px;
}

Try It Now

Direction Options:

  • to right – Left to right
  • to left – Right to left
  • to bottom – Top to bottom
  • to top – Bottom to top

2. Radial Gradients

Radial gradients spread out from a central point.

.circle-gradient {
    background: radial-gradient(circle, #ff9a9e, #fad0c4);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Try It Now

Types of radial gradients:

  • circle – Creates a circular gradient
  • ellipse – Creates an elliptical gradient

3. Conic Gradients

Conic gradients create a circular gradient around a center point.

.conic-gradient {
    background: conic-gradient(red, yellow, green, blue);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Try It Now

4. Adding Transparency

You can use RGBA colors to add transparency to gradients.

.transparent-gradient {
    background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.4));
    width: 300px;
    height: 150px;
}

Try It Now

5. Repeating Gradients

Repeating gradients can create striped or patterned effects.

.repeating-gradient {
    background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
    width: 300px;
    height: 150px;
}

Try It Now

Conclusion

CSS Gradients are a powerful way to enhance UI design without using images. They are widely used for backgrounds, buttons, and stylish effects.