![]() ![]() The border of the ending shape shown in this image is just for demonstration purposes. The ending shape can be either a circle or an ellipse, and it can be of any size. The 0% color stop location is at the start of the gradient ray, and the 100% color stop location is on the point where the gradient ray intersects the ending shape. The gradient ray is anchored at the center of the gradient and extends horizontally towards the right. ![]() Starting from the center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric circles/ellipses are drawn and colored according to the specified color stops.Ĭolor stops are positioned on a virtual gradient ray similar to the gradient line of linear gradients. Color stops are given as a list, just as for linear-gradient(). The color stops determine the colors the gradient is made up of, and, optionally, where each color starts and/or ends. The size of the circle or ellipse is also determined in the gradient function. The ending shape determines whether the gradient has a circular shape or an elliptical shape. In other words, it determines the position of the point from which the gradient is going to emerge. The center of a radial gradient determines where the center of the gradient is going to be inside the element. However, the gradient itself has no intrinsic dimensions.Ī radial gradient is defined by its center, ending shape, and color stops. In a radial gradient, rather than colors smoothly fading from one side of the element to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.Īn example of a radial gradient fading from yellow to green and then to purple.Ī gradient is drawn into a box with the dimensions of the concrete object size, referred to as the gradient box. A is an that is made of two or more colors that smoothly fade from one color to another. The radial-gradient() function is used to create a. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |