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;
}
.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; }
Direction Options:
to right
– Left to rightto left
– Right to leftto bottom
– Top to bottomto 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%;
}
.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%; }
Types of radial gradients:
circle
– Creates a circular gradientellipse
– 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%;
}
.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%; }
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;
}
.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; }
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;
}
.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; }
Conclusion
CSS Gradients are a powerful way to enhance UI design without using images. They are widely used for backgrounds, buttons, and stylish effects.