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);

Similar tools