body { margin: 0; font-family: Arial; background-color: #f

1.	body { margin: 0; font-family: Arial; background-color: #f2f2f2; } .box { color: #fff; padding: 1em; text-align: center; background-color: #efefef; } .a { background-color: purple; } .b { background-color: violet; } .c { background-color: burlywood; } .d { background-color: gainsboro; } .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; }
Answer» <P>In CSS, Gradients lets you display TRANSITION between two or more colors in a very smooth way. There are two types of Gradients in CSS3. 1. LINEAR Gradients – In CSS, a Linear gradient is a property VALUE which allows directions and stops colors. The direction goes in 5 different directions up, left, right, down and diagonal any one of the value can be used and for stop colors, there should be a minimum of 2 colors to be MENTIONED. We can even repeat the linear gradient. Ex: p {background-image: linear-gradient (direction, stop-color1, stop-color2, stop-color3)} 2. Radial Gradients – In CSS, a Radial gradient is a property value where the transition of the color will be defined from its center axis. By default, the shape would be an ellipse and the position would be in the center. Similar to linear gradients there should at least be two stop colors specified. Ex: p {background-image: radial-gradient (yellow, green, blue)}

body { margin: 0; font-family: Arial; background-color: #f2f2f2; } .box { color: #fff; padding: 1em; text-align: center; background-color: #efefef; } .a { background-color: purple; } .b { background-color: violet; } .c { background-color: burlywood; } .d { background-color: gainsboro; } .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; }

Answer»

<P>In CSS, Gradients lets you display TRANSITION between two or more colors in a very smooth way. There are two types of Gradients in CSS3.

1. LINEAR Gradients – In CSS, a Linear gradient is a property VALUE which allows directions and stops colors. The direction goes in 5 different directions up, left, right, down and diagonal any one of the value can be used and for stop colors, there should be a minimum of 2 colors to be MENTIONED. We can even repeat the linear gradient.

Ex: p {background-image: linear-gradient (direction, stop-color1, stop-color2, stop-color3)}

2. Radial Gradients – In CSS, a Radial gradient is a property value where the transition of the color will be defined from its center axis. By default, the shape would be an ellipse and the position would be in the center. Similar to linear gradients there should at least be two stop colors specified.

Ex: p {background-image: radial-gradient (yellow, green, blue)}

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment