How To Use CSS3 Gradients

CSS3 GradientsUsing: CSS3 gradient feature we can create a gradient from one color to another without using any images and reduce the website load.

How to use CSS3 Gradients:
For making, smooth transitions between two or more colors use CSS3 gradient feature and provide a flexible solution for web design. Before CSS3 gradient effect, we had to use the images. After that, for reducing the download time and saves the bandwidth we use CSS3 gradients effect.We can be scaled up or down to any length without losing the quality using elements with gradients. And output generated by the browser so it will deliver much faster.Two styles are used for gradients: linear and radial.

Create a CSS3 Linear Gradients:
You must specify at least two color stops to design a linear gradient. If you want to create more complicated gradient effects than you can specify more color stops. Using CSS3 Gradients we can also set a direction, a starting point, and an angle according to which gradient effect is used. The basic syntax of linear gradients:

background:linear-gradient(direction, color-stop1, color-stop2)

Top to Bottom Linear Gradient:
The example of a linear gradient from top to bottom.

HTML For CSS3 gradient:

 <div class="gradient"></div>

CSS For CSS3 gradient:

.gradient {
        width: 400px;
        height: 300px;
        background: red;
        background: -webkit-linear-gradient(red, yellow);
            
    }

In HTML section we define a class(name-gradient). After that, we apply some CSS style like width, height, background color, gradient effect and also define color stops.

Left to Right Linear Gradient:
The example of a linear gradient from Left to Right.

.gradient {
   
    background: red;
    background: linear-gradient(to right, red, yellow);
}

In case of left to right, we define a direction (to right)
Diagonal Linear Gradient:
We can create a gradient in the diagonal direction. The example of a linear gradient from the bottom left corner to the top right corner.

.gradient {
   
    background: red;
    background: linear-gradient(to top right, red, yellow);
}

Using Angles setting Direction of Linear Gradients:
We can set the angle for more control over the direction of the gradient. For create a bottom to top gradient use angle 0deg, and clockwise rotation represents by positive angles, that means creates a left to right gradient is defined by the angle 90deg. The basic syntax for  linear gradients using angle:

background:linear-gradient(angle(0deg), color-stop1, color-stop2)

The example of a linear gradient from left to right using angle.

.gradient {
  
    background: red;
    background: -webkit-linear-gradient(0deg, red, yellow);
    background: linear-gradient(90deg, red, yellow);
}

Using Multiple Color Stops Creating Linear Gradients:
Using more than two Color Stops we can create a gradient. The example of a linear gradient using multiple color stops.

.gradient {
  
    background: red;
    background: linear-gradient(red, yellow, lime);
}

Location Color Stops Setting:
We can specify the location of a color stop either a percentage or an absolute length. 

.gradient {
   
    background: red;
    background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
 
}

Creating CSS3 Radial Gradients
We can create a radial gradients using radial-gradient() function. 

background: radial-gradient(shape size at position, color-stop1, color-stop2);

The example of a radial gradient.
    
.gradient {
    
    background: red;
    background: radial-gradient(red, yellow, lime);
}

How to define Shape of Radial Gradients:
For ending shape of the radial gradient we define shape argument of the radial-gradient() function.
Example:

.gradient {
   
    background: red;
    background: radial-gradient(circle, red, yellow, lime);
}