![]() That's the part that comes after the at keyword in the first argument of the radial-gradient() function. The center pointīecause a radial gradient is either an ellipse or a circle, it has a center point.Įven if the center point is, by default, at the center of the gradient box, it can be positioned wherever you want by using the parameter. But for the sake of simplicity, for the rest of this article, we'll assume the gradient box matches exactly the DOM element it applies to. So, the gradient box isn’t always positioned and sized like the DOM element the gradient applies to. Here is a red to blue radial gradient applied to an element: That's the same area where a background-color or an background-image would be displayed. Usually, the gradient box is the border-box of the element which the background is applied to. What gives a visible dimension to the gradient is its gradient box i.e. The gradient boxĪ gradient image has no dimensions, it is infinite, unlike traditional background images. Now, let's define these various parts in more details. The rectangle is the gradient box (which we'll define in a second), the white dot is where the gradient is positioned, the horizontal line is the gradient ray (also defined later), the thick outer-most circle is the gradient shape, and the gray inner-circles represent where the color stops are positioned. In the above example, we've drawn a circle gradient. Let's illustrate this a little bit to help make sense of this: The first color will start at the center of the shape. The colors should be listed from the inner-most to the outer-most. The list of colors you want to use in the gradient. By default the gradient shape is centered in the gradient box, but you can choose any position you want. This corresponds to the outer-most concentric shape where the 100% color stop would be positioned. The colors defined in the gradient will be displayed in concentric layers inside this shape. This defaults to an ellipse, but can also be a circle. High-level syntax descriptionĪt a high level, here is what the radial-gradient syntax looks like: radial-gradient ( at, ) Sure, this isn't the best drawing of human eyes you've ever seen (plus, it doesn't render properly in Safari, see why in the browser support section), but it did help me understand a lot more about how radial gradients worked and, with this article, my hope is that you too can learn a thing or two about them. Here is the result (it's an iframe, so go ahead and use DevTools to see how it works if you want). To learn how to use the radial-gradient CSS function, I attempted to draw a pair or eyes, only with CSS, just one element par eye, and only using radial gradients. It took me a long time to find an excuse to dig deeper into the logic behind it but I'm very thankful I did. Seven years ago, I taught myself all about CSS linear gradients and, ever since, I've been meaning to learn more about how radial gradients worked as well. Patrick / articles / Do you really understand CSS radial-gradients? Patrickĭo you really understand CSS radial-gradients? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |