YouTip

## CSS radial-gradient() Function The `radial-gradient()` function in CSS creates an `` consisting of a progressive transition between two or more colors radiating from an origin point (the center of the gradient). Unlike linear gradients, which transition along a straight line, radial gradients transition outward in a circular or elliptical shape. ### Quick Example The following example demonstrates a basic radial gradient with evenly spaced color stops: ```css #grad { background-image: radial-gradient(red, green, blue); } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports the `radial-gradient()` function. Numbers followed by `-webkit-`, `-moz-`, or `-o-` specify the first version that supported the function using a vendor prefix. | Function | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **radial-gradient()** | 26.0
10.0 `-webkit-` | 10.0 | 16.0
3.6 `-moz-` | 6.1
5.1 `-webkit-` | 12.1
11.6 `-o-` | --- ## CSS Syntax ```css background-image: radial-gradient(shape size at position, start-color, ..., last-color); ``` ### Parameter Values | Value | Description | | :--- | :--- | | **`shape`** | Defines the shape of the gradient.
• `ellipse` (Default): The gradient is shaped as an ellipse.
• `circle`: The gradient is shaped as a perfect circle. | | **`size`** | Defines the size of the ending shape.
• `farthest-corner` (Default): The gradient's ending shape meets the corner of the box farthest from its center.
• `closest-side`: The ending shape meets the side of the box closest to its center.
• `closest-corner`: The ending shape meets the corner of the box closest to its center.
• `farthest-side`: The ending shape meets the side of the box farthest from its center. | | **`position`** | Defines the center position of the gradient. It uses the same syntax as `background-position` (e.g., `center`, `top`, `bottom`, `left`, `right`, or specific coordinates like `60% 55%`). Defaults to `center`. | | **`start-color, ..., last-color`** | Color stops used to define the gradient transitions. You must specify at least two colors. | --- ## Practical Examples ### 1. Unevenly Spaced Color Stops You can specify a percentage or length value after each color to control where the color transitions begin and end. ```css #grad { /* Red occupies up to 5%, transitions to green by 15%, and then to blue by 60% */ background-image: radial-gradient(red 5%, green 15%, blue 60%); } ``` ### 2. Setting the Shape to Circle By default, radial gradients are elliptical. You can force a circular shape using the `circle` keyword: ```css #grad { background-image: radial-gradient(circle, red, yellow, green); } ``` ### 3. Using Different Size Keywords The size keywords determine how the gradient expands relative to the boundary of its container. ```css /* The gradient ends at the closest side of the container */ #grad1 { background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black); } /* The gradient ends at the farthest side of the container */ #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black); } ``` --- ## Key Considerations 1. **Fallback Backgrounds**: Always provide a solid background color fallback (`background-color`) before the `background-image` property for older browsers that do not support CSS gradients. 2. **Performance**: Complex gradients with many color stops can impact rendering performance on low-end mobile devices. Use them efficiently. 3. **Color Stops Order**: Ensure your color stops are listed in ascending order (e.g., `10%`, then `50%`, then `90%`). Out-of-order stops will be automatically corrected by the browser but can lead to unexpected visual results.