CSS Gradients

CSS Gradients


CSS Gradients
In addition to solid colors and images, CSS also supports gradient backgrounds. 
In the past, this was achieved by creating an image containing the desired gradient and setting that as a background-image. 
With modern browsers, and even IE11, this is no longer needed, as gradients are natively supported.
Gradients are new image types, added in CSS3. As an image, gradients are set with the background-image property, or the background shorthand.
There are two types of gradients supported in all browsers - 
  • Linear gradients - Which go along a straight line. They can go left to right, top to bottom, or at an arbitrary angle. 
  • Radial gradients - Whichstart at a central point and radiate outward.
Another can be - 
  • Conical Gradient.
Linear Gradients
A linear gradient gradually transitions between colors along a straight line. 
A gradient can have multiple "stops" or color transitions.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
 
Now we will See example  -
Example –
A simple linear gradient
<style>
.gradient {
background-image: linear-gradient(red, blue);
width: 10rem;
height: 5rem;
}
</style>
<div class="gradient"></div>
Output -
By default, a linear gradient goes from top to bottom, and the stops are evenly distributed. The output below has two stops - The first is red, and the second is blue.
You can easily add more stops to a linear gradient.
Example 2 -
<style>
.gradient {
background-image: linear-gradient(
red,
blue,
green
);
width: 10rem;
height: 5rem;
}
</style>
<div class="gradient"></div>
Output - 
Using transparency 
You can even use transparency in a gradient. 
Example  3 - 
<style>
.gradient {
background-image: linear-gradient(
transparent,
blue,
transparent
);
width: 10rem;
height: 5rem;
}
</style>
<div class="gradient"></div>
Output - 
Changing the direction
To change the direction of the gradient from its default of top to bottom, add an argument of the format: to at the beginning of the linear-gradient function. 
This specifies the direction of the gradient.
Example  -Specifying the gradient direction - 
<style>
.gradient {
background-image: linear-gradient(
to right,
red,
blue
);
width: 10rem;
height: 5rem;
}
</style>
<div class="gradient"></div>
Output - 
You can also specify an arbitrary angle for the linear gradient. 
Example - 
<style>
.gradient {
background-image: linear-gradient(
45deg,
red,
blue
);
width: 10rem;
height: 5rem;
}
</style>
<div class="gradient"></div>
Output-