A conic gradient changes color around an ellipse in a circular direction, unlike a radial gradient, which changes color outward from its center. CSS creates one with conic-gradient(), or repeats the pattern with repeating-conic-gradient(). section 13.1.4
Basic conic gradient
Apply a conic gradient as a background image: .fade { height: 200px; width: 400px; background-image: conic-gradient(white, blue); } Because the gradient wraps from its final color stop back to its first, contrasting colors can create a hard seam. Repeat the first color at the end—conic-gradient(white, blue, white)—to avoid that abrupt transition. section 13.1.4
Customize the gradient through its initial parameters and color-stop positions:
- Set the starting angle with from <angle>; the default is 0deg, pointing straight up. section 13.1.4
- Move the gradient center with at <x-position> <y-position>, measured from the element’s top-left corner. section 13.1.4
- Choose a color-interpolation method with in <color-space>, and place color stops using percentages or angles. section 13.1.4
Figure 13.10 A conic gradient changes color in a circular direction.
Use the figure to see how a conic gradient distributes color around a circular path. section 13.1.4
