Radial Gradients with CSS3

We will now see how to achieve CSS3 gradients in a color gradient that will be distributed radially, creating both circles and ellipses.

This is the fourth article that we are dedicating to them and this time we are going to look at radial gradients, which form circular designs, with a uniform radial distribution, or ellipse gradients, with a variable radial distribution.

Radial gradients, which include both those that are generally circular in shape and those that are in the shape of an ellipse, are achieved through the CSS3 radial-gradient attribute. So, by applying different parameters, we will achieve all the possibilities. As we will see below, they have a way of defining themselves very similar to the one we saw with linear gradients, although in this case we will have some other parameters to take into account, which can make it a little more difficult to understand.

The summarized syntax will be the following:

background: radial-gradient(parameters);

O well:

background-image: radial-gradient(parameters);

The parameters that we can indicate in the radial-gradient() declaration are where the difficulty and at the same time the power of this type of gradient really lies. However, most of the parameters are optional, so we can make fairly simple radial gradients, which will take default parameters. Actually, as we will see, the only thing that we will always need is to define two or more colors to make the color gradient.

The list of parameters that we can indicate is the following:

A) Initial position of the circular gradient:

Radial gradients start at any point on the background of an element and extend out from that point in circular or ellipse shapes. Then, to define them, we’ll need a way to specify that starting point of the gradient. The point is specified with one or two coordinates, which can have different CSS units. If omitted, it is understood that the gradient has to start at the center point of the element’s background.

B) Shape and/or dimension:

The shape can be circular or ellipse, for which we specify the words “circle” or “ellipse”. The size is expressed with another series of keywords, which indicate how far the circle or ellipse should grow: closest-side | closest-corner | farthest-side | farthest-corner | contains | cover. For example, closest-side indicates that the circle or ellipse should grow to the nearest side. The word farthest-corner would indicate that it should grow to the farthest corner. Contain would be the same as saying closest-side and cover synonymous with farthest-corner.

Alternative to B) Size:

As an alternative to specifying the shape and dimension of the gradient -point B) above-, we can indicate a couple of measures in any CSS unit or percentages. Those measurements would be used to generate a circle or ellipse of the desired size for our gradient. The first measurement would be for the width of the ellipse and the second would be for the height (if both are the same a circular shape would be shown in the gradient. If they are different, it would be an ellipse. The size should always be positive.

Note: This alternate way of specifying the shape is not fully implemented in any browser. As of this writing, Firefox doesn’t support it, Chrome only renders circular shapes, and neither Opera nor Explorer support radial gradients.

C) Gradient Colors:

To finish, you must indicate how many colors you want, separated by commas, with the possibility of indicating the color stops you want.

Now, let’s look at a series of examples that we hope will clarify the ideas regarding the declaration of radial funds.

Note: Radial backgrounds are only slightly supported in browsers at this time. Everyone has at least some detail that they still have to polish. At the moment neither Opera nor IE9 show them in any case. Chrome does not have the possibility of making gradients in the shape of an ellipse and Firefox does not yet implement alternative B), commented above, for the definition of the size of the gradient by means of the values ​​of width and height.

In the examples that will be shown below, only the code with the definitive style attribute is presented, which will be available when CSS3 is a standard.

background: radial-gradient(ellipse cover, #66f, #f80, #ffc);

When in reality, at the moment, for it to work in Firefox and Chrome you have to place their attributes with the proprietary names of each browser.

background: -webkit-radial-gradient(ellipse cover, #66f, #f80, #ffc);
background: -moz-radial-gradient(ellipse cover, #66f, #f80, #ffc);

The -webkit-radial-gradient flag works for Webkit-based browsers, such as Chorme, and -moz-radial-gradient works for Mozilla-based browsers, such as Firefox.

background: radial-gradient(#0f0, #06f);

This makes a gradient from green to turquoise blue, with all other parameters default. It would make a gradient in a circular shape, with its starting point in the center of the element, in green, making it reach turquoise blue at the edges of the element.

background: radial-gradient(top left, #fff, #f66);

In this case we have defined the starting point of the gradient with “top left”. This is the upper left corner, where white will appear and the gradient would have a circular shape tending towards pink, occupying 100% of the element.

background: radial-gradient(200px 30px, #f0f, #000);

This gradient also declares the starting position of the gradient, but it does so using the defined coordinates with pixel measurements. It is circular and occupies 100% of the available space in the element.

background: radial-gradient(center, #00f, #000 50%);

In this we declare the initial position with center, the default behavior, which places the start of the gradient in the center, both vertically and horizontally. The detail is that the gradient is made from the center to 50% of the size of the element, since we have put a color stop of 50% in the last color.

Note: Color stops, or “color stops,” were explained when discussing .

background: radial-gradient(circle, #66f, #f80, #ffc);

This is the first of the examples in which we define the shape of the gradient, although we only indicate “circle”. Therefore, the gradient will start in the center and will occupy 100% of the available space in the element, although always with the same radius.

background: radial-gradient(ellipse cover, #66f, #f80, #ffc);

This gradient is exactly the same as the previous one, but instead of circular it is ellipse, covering 100% of the available space, and starting in the center. This is the default behavior of the style.

Note: However, at the time of writing this article the ellipse shape is only implemented by Firefox. So the default behavior in Chrome continues to be circular.

background: radial-gradient(10%, ellipse closest-side, #66f 60%, #f80 85%, #ffc);

This example has the gradient position and shape defined. It is the first to specify those two values ​​at the same time. In this case, only 10% of the position is declared, so it will appear centered vertically and horizontally it will appear in 10% of the container space on the left. It is ellipse-shaped, and closest-side means that it expands in the shape of an ellipse until it is complete on the near side.

background: radial-gradient(10%, ellipse farthest-corner, #66f 60%, #f80 85%, #ffc);

This gradient is the same as the previous one, in the same position and in the shape of an ellipse, but the size has been defined with farthest-corner, so the gradient will be much larger, expanding to the farthest corner.

background: radial-gradient(20px 100px, 30% 80%, #fff, #666, #66f);

In this case we have defined the initial position with the coordinates in pixels and, what is new, we have defined both the shape and the size of the gradient in percentage. The width will be 30% of the element and the height 80%.

Note: This alternative to defining the shape and dimensions of the gradient, which we see in this example and the next three, does not work in Firefox at the time of writing, so only chrome will display a gradient on the element. However, Chrome is currently unable to produce ellipses, so the gradient will have a circular shape, despite having defined smaller dimensions for the width than for the height. However, browser compatibility with this type of gradient definition will soon improve.

background: radial-gradient(top left, 150px 100px, #ffc, #f96, #963, #630);

We have defined the initial position by means of the top and left values ​​and the size by means of units in pixels.

background: radial-gradient(20% 80%, 100% 50%, red, blue 50px, red);

The position of the center of the gradient is with percentage, as well as the size of the ellipse, also with percentages.

background: radial-gradient(left, 200px 200px, #f00 20%, #f80, #ff0, #0f0, #00f, #60f, #c0f);

In this we have defined the size of the width and height with two values ​​in pixels, but since they are equal, instead of an ellipse we would see a circular shape, whose radius is always the same.

Remember that you can, although only in browsers that support radial gradients. Other users can see the gradients produced in the examples in the image below:

In the following article we will talk about the last type of CSS3 gradients that we have yet to see, the .