![]() If you specify four colors, then the 0% color stop will be the first color, the ~33% color stop will be the second color, the ~66% stop will be the third color, and then the 100% will be the fourth color. Similarly, the points between the 50% color stop and the 100% position, are the intermediate colors between #009966 and purple. The points lying between 0% and 50% are the intermediate colors you pass through when you’re moving from yellow to #009966. When three colors are specified, they are distributed along the gradient ray such that the starting point at 0% is pure yellow (in our example), the 50% point along the gradient line is pure #009966 (which is a green color), and the 100% point (ending point) is pure purple. You can also change the size and position of the center of the gradient, as we mentioned earlier. Radial-gradient(circle, yellow, #009966, purple) You can change that into a circle by using the circle keyword: When no size or shape is specified, the gradient defaults to an ellipse gradient. Radial-gradient(yellow, #009966, purple) Without specifying any color stops, size, or ending shape, the gradient would look like the following image: Suppose you have a simple gradient made up of three colors: yellow, #009966 which is a green color, and then purple. 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. |