How do you make a color gradient

A color gradient specifies a range of colors arranged in some specific order. You can make stunning background color combinations using color gradients.
We can achieve smooth transition between different colors using css gradients.

CSS Linear Gradients

Here you can see a smooth linear transition between two colors.


        	<div style="background: linear-gradient(to right, #cc2b5e, #753a88);height: 10em;"></div>

Here is a list of 25 stunning color gradients for you. We can change the direction of transition by changing the first argument of linear-gradient()


        	<div style="background: linear-gradient(to left, #cc2b5e, #753a88);height: 10em;"></div>


        	<div style="background: linear-gradient(to top, #cc2b5e, #753a88);height: 10em;"></div>


        	<div style="background: linear-gradient(to bottom, #cc2b5e, #753a88);height: 10em;"></div>

linear-gradient() can take more color arguments so that you can extend the transition linearly to more colors.


        	<div style="background: linear-gradient(to right, #cc2b5e, #753a88, yellow);height: 10em;"></div>

In all the above examples, the colors are evenly placed. We can adjust the contribution of each color by mentioning a percetage to each color.


        	<div style="background: linear-gradient(to right, #cc2b5e 0%, #753a88 75%);height: 10em;"></div>

CSS Radial Gradients

A radial gradient is similar to linear gradient. The difference is that a radial gradient is defined by its center.


        	<div style="background: linear-gradient(#cc2b5e, #753a88);height: 10em;"></div>

By default, the colors will be displayed in elliptical shape. In radial gradient also, we can adjust the space between the colos by mentioning its percentage.


        	<div style="background: radial-gradient(#cc2b5e 15%, #753a88 35%, yellow 90%);height: 10em;"></div>

Here is a stunning combination with a circular transition of colors. Here we have added the argument 'circle' to radial-gradient()


        	<div style="background: radial-gradient(circle, red, yellow, green);height: 30em;"></div>

We can repeat the color combinations at the available space as well. We need to use the css function repeating-radial-gradient() to repeat the colors.


        	<div style="background: repeating-radial-gradient(circle, yellow, orange 10%, gold 15%);height: 30em;"></div>

Here is the same colors repeating in a linear direction using repeating-linear-gradient().


        	<div style="background: repeating-linear-gradient(yellow, orange 10%, gold 15%);height: 10em;"></div>