![css linear gradient css linear gradient](https://upload-images.jianshu.io/upload_images/27583510-b7d45a794aa83b5d.png)
You can also use a keyword value to specify the direction of the gradient line. You can do this by specifying an angle value which specifies the angle of the line inside the element. When you want to create your own linear gradient, you need to start by specifying the gradient line.
![css linear gradient css linear gradient](https://miro.medium.com/max/745/1*x6A2-Rqbad_syyn3Ht2LnA.png)
In between these two perpendicular lines, imagine a set of similar perpendicular lines, each line colored the same color as its point of intersection with the gradient line.Ĭreating Linear Gradients: Specifying a Gradient Line Every point on the ending line is the ending color. Every point on the starting line is going to be of the starting color. Notice also how the two perpendicular lines-the starting line and ending line-are positioned. That’s intentional, and will always be true for linear gradients. Notice how, though the starting point and ending point are outside of the element, they’re positioned precisely right so that the gradient starts with the pure first color exactly at the starting corner, and is the pure ending color exactly at the opposite corner. If you specify multiple colors like three, four, or more, those colors will also be spread along the gradient line, starting with the first, going through the intermediate ones, and ending with the last color in the list. Between the starting point and the ending point, the points will be painted by the intermediate colors between the first and last color. The first color your specify will be the color of the starting point, and the final color you specify will be the color of the ending point. The colors you specify will start at the starting point and end at the ending point. The gradient line is the line along which the colors are going to be painted.
![css linear gradient css linear gradient](http://lotgrafix.com/wp-content/uploads/2019/04/34-asana-color-gradient.jpg)
The gradient line, starting line, ending line, and axis of a gradient. To better understand this, please have a look at the following illustration: This produces a smooth fade from each color to the next, progressing in the specified direction. The gradient image is constructed by creating an “infinite canvas” and painting it with lines perpendicular to the gradient line, with the color of each line being the color of the gradient line where the two intersect. The direction of the line and the colors specified are all defined in the function, but we’ll get to these after covering the concept of the gradient line. The line can be horizontal, vertical, or diagonal, taking any angle value. The colors making up the gradient are then placed along that line. However, the gradient itself has no intrinsic dimensions.Ī linear gradient is defined by an axis called the gradient line.
![css linear gradient css linear gradient](https://res.cloudinary.com/practicaldev/image/fetch/s--9FeFNDWb--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/qvfgvs2ba0nq7938x7w9.jpg)
A is an that is made of two or more colors that smoothly fade from one color to another.Ī linear gradient is a gradient that fades from one color to another over a line (as opposed to a radial gradient that has a circular or elliptical shape).Īn example of a gradient fading from yellow to purple.Ī gradient is drawn into a box with the dimensions of the concrete object size, referred to as the gradient box. The linear-gradient() function is used to create a.