About CSS Gradient
Gradient is an important color feature addition in CSS3. Rather than using single color, now we can add multiple color combinations in one declaration block without relying on images, which could decrease the HTTP request in your website allowing the website load faster. If you have played around with gradients in CSS3 you are probably familiar with the two methods: radial and linear gradient
Linear CSS Gradient
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. It goes down/up/left/right/diagonally. In simple terms it is a straight progression.
background: linear-gradient(#e66465, #9198e5);
Radial CSS Gradient
The radial-gradient() CSS function creates repeating gradients that radiate from an origin. It is defined by their center or origin. In simple terms, it is a circular progression.
background: radial-gradient( circle 972.6px at 10% 20%, rgba(243,0,75,1) 0%, rgba(255,93,75,1) 90% );
Conic CSS Gradient
The conic-gradient() CSS function consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). It is rotated around a center point. With conic gradients, the colors transition will be around the center of a circle, starting at top and going clockwise.
background: conic-gradient(red, orange, yellow, green, blue);