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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.gradient-box {
background: linear-gradient(to right, #ff7e5f, #feb47b);
width: 300px;
height: 150px;
}
.gradient-box { background: linear-gradient(to right, #ff7e5f, #feb47b); width: 300px; height: 150px; }
.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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.circle-gradient {
background: radial-gradient(circle, #ff9a9e, #fad0c4);
width: 200px;
height: 200px;
border-radius: 50%;
}
.circle-gradient { background: radial-gradient(circle, #ff9a9e, #fad0c4); width: 200px; height: 200px; border-radius: 50%; }
.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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.conic-gradient {
background: conic-gradient(red, yellow, green, blue);
width: 200px;
height: 200px;
border-radius: 50%;
}
.conic-gradient { background: conic-gradient(red, yellow, green, blue); width: 200px; height: 200px; border-radius: 50%; }
.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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.transparent-gradient {
background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.4));
width: 300px;
height: 150px;
}
.transparent-gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.4)); width: 300px; height: 150px; }
.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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.repeating-gradient {
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
width: 300px;
height: 150px;
}
.repeating-gradient { background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px); width: 300px; height: 150px; }
.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.