How Linear Gradients really Work
In the previous lessons, you had a feel for how linear gradients work. In this lesson, we will go even deeper
At the start of this section, we defined a linear gradient as a gradient that fades from one color to another over a line.
Actually, a gradient line exists on every linear gradient. This gradient line serves one purpose, to determine the direction in which the gradient will be painted inside an element.
What’s the default direction?
The default starting position of the gradient line is from top to bottom as seen below:
While top to bottom is the default, it is also possible to have an angled gradient line. What I mean by that is a gradient line that isn’t vertically inclined but tilted at an angle.
Please refer to the graphic above, where I have drawn a gradient line with the angle measured from the clockwise direction.
Let’s see an example.
Consider a div with a linear-gradient applied to it like so: background-image: linear-gradient(red, black)
As you may expect, the result of this is a gradient that blends from top to bottom (the ...