The radial-gradient() CSS image function creates a gradient that starts at one point and spreads outward in every direction. By default, it is centered, elliptical, and extends evenly to the element’s corners. section 13.1.3
A basic radial gradient
Apply the function as a background image: .fade { height: 200px; width: 400px; background-image: radial-gradient(white, blue); } The colors transition outward from the center, with the ellipse following the element’s proportions. section 13.1.3
Adjust the gradient when the default shape or position does not fit the design:
- Add circle to create a circular gradient instead of an ellipse. section 13.1.3
- Provide one size value for a circle, or two values for horizontal and vertical dimensions, such as radial-gradient(50px 25px, white, blue). section 13.1.3
- Use at with x- and y-coordinates to move the gradient’s center, and define color-stop positions with percentages or lengths. section 13.1.3
- Use repeating-radial-gradient() to repeat the colors in concentric rings. section 13.1.3
A radial gradient can also serve as a mask image. Transparent regions mask out the element, enabling effects such as a vignette; temporarily viewing the same gradient as a background can help diagnose an invisible mask. section 14.2.1
