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

Hire a programmer

Popular posts from this blog

CSS selector

C program to convert decimal to binary number

C Program to convert binary to decimal number