CSS Radial Gradients
CSS gradients were introduced in CSS 3 for the purposes of creating a gradient between two or more colors.
A radial gradient is where colors gradually emerge from a single point and smoothly spread outward in a circular or elliptical shape. This is in contrast to a linear gradient, where the colors blend across a linear line.
Below are examples of radial gradients. These use CSS3 to create the gradient. Note that they also use proprietary functions such as -webkit-radial-gradient and others for browser compatibility.
Basic Radial Gradient
This example demonstrates what a basic radial gradient looks like. Here, we've specified two colors (lightyellow and gold).
The W3C standard notation looks like this: background: radial-gradient(lightyellow, gold);. We have also added (non-standard) proprietary browser functions to provide maximum browser compatibility.
| Code | Result |
|---|---|
|
Radial gradient...
|
Circular Gradient
In the above example, the gradient shape changes depending on the containing box. If the box is rectangular, the gradient is an ellipse. If the box is square, then the gradient is a perfect circle.
In this example, the gradient is always a perfect circle. This is because we've added the circle keyword. This keyword ensures that the ellipse is a circle despite its outer box.
The (W3C standard) notation looks like this: background: radial-gradient(circle, lightyellow, gold);.
| Code | Result |
|---|---|
|
|
Circular gradient...
|
Rainbow Gradient
Here, we add many colors to give our gradient that "rainbow" look. Seeing as the colors of the rainbow are red, orange, yellow, green, blue, indigo, violet, these are the colors we specify in the gradient.
We also start the gradient from the bottom of the box, as opposed to the center.
Here, the W3C version looks like this: background: radial-gradient(to top, orange, yellow, green, blue, indigo, violet);
| Code | Result |
|---|---|
|
|
Rainbow radial gradient...
|
Color Stops
You can specify the exact location of each color stop. A color stop is a point in the gradient that has the specified color value. To specify the location of a color stop, you simply add the location as a percentage value (eg, 20%) or a length value (eg, 20px).
In this example, the first color stop is located 0 pixels (i.e. 0px), the second color stop is 80 pixels (80px), and the third is 130 pixels (130px).
Here, the W3C standard code is: background: radial-gradient(cornflowerblue 0px, royalblue 80px, lightcyan 130px);
| Code | Result |
|---|---|
|
|
Radial gradient with color stops...
|
Repeating Gradients
You can use the repeating-radial-gradient function to make the gradient repeat multiple times across the element.
In this first example, the W3C standard code goes like this: background: repeating-radial-gradient(to top, indigo -50px, violet);
| Code | Result |
|---|---|
|
|
Repeating gradient...
|
In the following example, the (W3C) standard code is: background: repeating-radial-gradient(to top, khaki 15%, lightyellow 30%);
| Code | Result |
|---|---|
|
|
Repeating gradient 2...
|
In the following example, the (W3C) standard code is: background: repeating-radial-gradient(closest-side at 15px 25px, khaki 15%, lightyellow 40%);
| Code | Result |
|---|---|
|
|
Repeating gradient 3...
|
In the following example, the (W3C) standard code is: background: repeating-radial-gradient(closest-side circle at top left, lightyellow, khaki 15%, lightyellow 40%);, although you'll notice that the proprietary functions are written slightly differently (i.e. top left, circle, lightyellow, khaki 15%, lightyellow 40%).
| Code | Result |
|---|---|
|
|
Repeating gradient 4...
|
Browser Compatibility
You might have noticed that the above examples use more than just the CSS3 gradient functions. The examples also include proprietary functions such as -webkit-linear-gradient, -moz-linear-gradient, etc. The reason I have included these extra functions is for browser compatibility. Because CSS gradients are new to CSS 3, it could take some time before the official W3C gradients are widely supported in browsers. Because of this, most developers use the proprietary gradient functions so that all/(most?) browsers will display the gradient as expected.