Technical Interview Questions: What are gradients in CSS3?

What is linear gradient in CSS?

Gradient allows for smooth transitions between colors, which helps to reduce download speed and lowers bandwidth requirements.
It is applicable on the background property.
There are two types of gradient in CSS3: Linear and radial
For linear gradient you must specify 2 colors and direction in which the color. For ex: background: linear-gradient(top, red, blue); //This will make the color change from red to blue starting from top to bottom.
Different directions can be: top, left, right, bottom
Top to bottom is default value for the linear gradient. In that case the definition looks like: linear-gradient(red, blue). If direction is omitted, by default top direction is assumed.
For different browsers linear gradient property is referred as:

To specify gradient direction as diagonal 2 endpoints are supposed to be mentioned.
For ex: linear-gradient(to bottom right, red, black) //It will move from bottom right starting with red color and gradually change it to black
You can specify angles in the linear gradient as follows: linear-gradient(180deg, red, blue)
You can specify multiple colors too like this: linear-gradient(red, green, blue, black)
Gradient can be made transparent to generate a fading effect. For transparency, rgba function with 0 to 1 can be added.

What is radial gradient in CSS?

Linear gradient allows you to transform the color from the sides and corners of a shape. However, radial gradient allows you to transform color from center.
It is similar to linear gradient wherein you have to specify at least 2 colors.

You can specify different width for the color stops like this: radial-gradient(red 5%, blue 95%) //Red will only occupy 5% and blue will occupy 95%
If you have to repeat the result of a radial gradient across an element then you should use, repeating-radial-gradient.

Technical Interview Questions