In CSS, you can smoothly make transitions between two or more colors. CSS has two types of gradients:
-
Linear gradient: It goes down/up/left/right/diagonally and makes smooth transitions of colors. To make a linear transition you first have to choose two color stops. Color stops are the color among which you want to make the transitions. You can also select a starting point and a direction(an angle) for the transition.
background-image: linear-gradient(direction, color-stop1, color-stop2, …); - Radial gradient: It is defined by the center. Here also you have to specify at least two color spots.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ...);
Example:
<!DOCTYPE html> <html>
<head>
<title>
Transition work with linear gradient
background button
</title>
<style>
button {
background-image:
linear-gradient(to bottom right, green, white);
}
button:hover {
background-image:
linear-gradient(to bottom right, green, yellow);
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>Hover over the bytton</b>
<br>
<br>
<button>Click me</button>
</center>
</body>
</html>
|
Output: