CSS radial-gradient() functionThe radial-gradient() is an in-built CSS function which generates the smooth transitions between two or more than two colors. It sets the radial gradient as the background image. It can be a circular or elliptical shape. It saves the bandwidth usages as well as helps to reduce the download time. In radial-gradient, the color emerges from a single point then spread outwards. A radial-gradient is defined by its center point and ending shape and two or more than two color stops. SyntaxLet's discuss its arguments. position: It defines the gradient position. Its default value is center. It can be specified in units (such as px, em, etc.) or keywords (like bottom, left, etc.). shape: It defines the shape of the gradient, which can either be circular or elliptical. If its value is not specified, then it sets to its default value, i.e., ellipse. size: It defines the gradient size. Its possible values are:
Its default value is farthest-corner. start-color, …., last-color : It holds the value of color followed by an optional stop position. Let's try to understand the radial-gradient() function by using some illustrations. Example1Test it NowExample2In this example, we are going to set the shape of radial-gradient. Test it NowExample3In this example, we are going to set the size of radial gradient. Test it Now
Next TopicCSS translate
|