In this advanced series of CSS tutorials, we will discuss how we can make a smooth transition between specified color using gradient values.
CSS Gradients
A gradient is a transition of two or more than two specified colors, and to create a transition, we can use the
background-image
property with the gradient value. There are two types of gradients
- Linear Gradients(up/down/left/right/diagonally)
- Radial Gradient (from the center)
CSS Linear Gradients
In linear gradients, the color transition can be moved from down to up, up to down, left to right, right to left, and diagonally. And to create a smooth transition gradient, we use the background-image property and
linear-gradient()
value. Inside the
linear-gradient(direction, color1,color2)
, we define the direction in which the transition should go and two or more colors.
Syntax
background-image: linear-gradient(direction, color1, color2, ...);
The linear-Gradient transition from Top to bottom
Top to bottom is the default value for the direction, in this color transition, change from top to bottom.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:linear-gradient(blue,green);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
Linear transition top to bottom
</div>
</body>
</html>
Preview
The linear-gradient transition from left to right
When we want to set a colorful transition from left to right then, the linear-gradient direction must be set
to right
.
Syntax
background-image: linear-gradient(to right, color1, color2, ...);
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:linear-gradient(to right,blue,green,yellow);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
Linear transition left to right
</div>
</body>
</html>
Preview
Note : To set the direction value to left from right to left transition or set the direction to up from bottom to up transition. Or use can Just reverse the order of the colors
Linear-gradient diagonal transition
To make a diagonal transition set the direction value
to bottom right
or
to bottom left
. This will present gradient colors in a diagonal direction.
Syntax
background-image: linear-gradient(to bottom right, color1, color2, ...);
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:linear-gradient(to bottom right,blue,green,yellow,red);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
Linear transition Digonal
</div>
</body>
</html>
Preview
CSS Radial Gradient
In the Radial gradient, the color transition starts from the center of the image. And like the linear-gradient, it also requires two or more than two colors to perform the smooth transition. But unlike the direction radial-gradient accept shape, size, and position for the transition.
- The default shape is an ellipse.
- The default size is farthest-corner
- The default position is the center.
Syntax
background-image: radial-gradient(shape size at position, centercolor, color2,..);
Example (1) (Evenly Spaced Color)
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:radial-gradient(red,yellow,blue);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
</div>
</body>
</html>
Preview
Example (2) (various-shaped color)
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:radial-gradient(red 10%,yellow 30%,blue 60%);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
</div>
</body>
</html>
Preview
The shape of the radial gradient
By default, the shape of every radial transition is an ellipse but It can also be changed to circle.
Syntax
background-image: radial-gradient(circle, color1, color2, ….);
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:radial-gradient(circle,red 10%,yellow 30%,blue 60%);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
</div>
</body>
</html>
Preview
Radial gradient Size
The size parameter specifies the size of the gradient, and it accepts 4 values.
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image:radial-gradient(closest-side,red ,yellow,blue);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
</div>
</body>
</html>
Preview
Create a Rainbow transition in CSS
We can either use the linear-gradient or radial-gradient to create a rainbow. But all the colors must be mention in the gradient parameter.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
height:200px;
}
</style>
</head>
<body>
<div class="grad">
</div>
</body>
</html>
Preview
CSS Gradient
- A gradient is a smooth transition of multiple colors.
-
To create a gradient, we use the
background-imageproperty. - A gradient could be linear or radial.
- The linear can create a color transition from left to right, top to bottom, or diagonally.
- The radial gradient creates a transition from center to corner.