?Define and discuss the types of gradients in Cascading Style Sheets (CSS) 3.

Question

What will be an ideal response?

Answer 1

One of the new properties introduced with CSS3 is a gradient, which is a gradual transition from one color to another. CSS3 has two types of gradients: linear and radial.?Linear gradients can transition from several different angles. The default transition is from the top to the bottom. Linear gradients can also transition up, left, right, or diagonally.To create a linear gradient, thelinear-gradientproperty must be used. The following is an example of how to apply a linear gradient:?          body {             background: linear-gradient(white, blue);    }?This example applies a linear gradient that transitions from white at the top to blue at the bottom. To provide support for major browsers, the following prefixes must be used:-moz- for Mozilla Firefox-o- for Opera-webkit- for Google Chrome and Safari?The following example of a linear gradient includes all browser support prefixes. When using the prefixes, list the standard syntax last.?    body {             background: -moz-linear-gradient(white, blue);             background: -o-linear-gradient(white, blue);             background: -webkit-linear-gradient(white, blue);             background: linear-gradient(white, blue);    }?Radial gradients are specified by their center. The color begins in the center and transitions in a radial direction to another color or colors. To create a radial gradient, at least two colors must be specified. The following is an example of a radial gradient:?body {    background: -moz-radial-gradient(red, white, blue);    background: -o-radial-gradient(red, white, blue);    background: -webkit-radial-gradient(red, white, blue);    background: radial-gradient(red, white, blue);    }?Gradients create interest on a webpage, especially when used as a background.