How to apply gradient in css
In this article, we will learn about the CSS linear-gradient, how gradient work, how to apply the linear gradient in the background image, how to change the flow of the gradient.
The colour gradient Producing colour Transitions with vary continuously colour position.
Linear gradient:
By default, the linear gradient is top to bottom flow. You can change the flow of gradient from bottom to top, right to left, left to right, right diagonal and left diagonal with simple changes in the CSS code.
Example:
.grad{
background-image:linear-gradient(green,yellow);
}
This is the example of the linear gradient
Left to right flow of the gradient:
The flow of gradient is also changed by writing the simple code.
.grad{
background-image:linear-gradient(to left,green,yellow);
}
This is the example of the linear gradient
Right to left flow of the gradient:
The flow of gradient is also changed by writing the simple code.
.grad{
background-image:linear-gradient(to right,green,yellow);
}
This is the example of the linear gradient
Diagonal flow of color in gradient:
The flow of gradient is also changed to left daignal by writing the simple code.
.grad{
background-image:linear-gradient(to right bottom,green,yellow);
}
This is the example of the linear gradient
Same as right diagonal:
This is the example of the linear gradient
How we can use multiple colours in the gradient of the CSS?
Multiple colour in the gradient biting different colour in the bracket of linear gradient as in the following code snippet:
Example:
.grad{
background-image:linear-gradient(green,yellow,red,blue,black,white,brown);
}
This is the example of the linear gradient
How we can use percentage of colour in the gradient?
percentage of the colour apply by writing the percentage along with the colour in the bracket of linear gradient or radiant code of line the following code snippet.
Example:
.grad{
height:150px;
background-image:linear-gradient(green 70%,yellow);
}
How we use repeating linear gradient CSS?
If we apply repeating-linear-gradient, we cannot differentiate between simple linear gradient for repeating-linear-gradient until we apply colour percentage in the repeating-linear-gradient. see the example to see the differences between the repeating linear gradient or simple linear gradient.
Example:
Apply without percentage:
This is the example of the linear gradient
Apply with the percentage:
This is the example of the linear gradient
Comments
Post a Comment