Lesson 24: The Radial Gradient of a Box or Element

	The Radial Gradient of a Box or Element

Introduction

Instead of gradient that is based on a line, a radial gradient is a gradient where colors transition in a circle. This is available through a function named radial-gradient. The function can take two arguments as colors. Here is an example:

<html>
<head>
<title>Exercise</title>

<style type="text/css">
#whole { background: radial-gradient(#400, Bisque); }
</style>
</head>
<body id="whole">

</body>
</html>

We tested all radial gradient codes in Internet Explorer, Google Chrome (in both Microsoft Windows and Linux), and Firefox (in both Microsoft Windows and Linux). Internet Explorer and Google Chrome (in both Microsoft Windows and Linux) produced the same results. Firefox (in both Microsoft Windows and Linux) produced different results.

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

The Shape of a Radial Gradient

The radial gradient allows you to specify the shape to follow when drawing the colors. The two available options are circle and ellipse. The value of the shape is passed as the first argument to the function. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>

#whole { background: radial-gradient(circle, #400, Bisque); }

</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

The Length of a Radial Gradient

By default, to draw a radial gradient, the browser starts in the center of the box. Otherwise, CSS allows you to specify a center of your choice. This option is set in the first argument. It starts with the at keyword. If you want to specify a constant value for the length of the gradient color, follow at with an HTML-Based Number: In this case, the first gradient color would be drawn with that distance as its center. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole { background: radial-gradient(at 125pt, #00006A, Azure); }
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

Instead of a fixed length, you can provide a relative value as a percentage. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole { background: radial-gradient(at 75%, DarkGreen, GreenYellow); }
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

You can also specify the shape of the radial gradient. To do this, provide the shape name before at. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole { background: radial-gradient(circle at 125pt, #00006A, Azure); }
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

The Direction of the Center of a Radial Gradient

The center of a radial gradient can also be set as a direction. The available options arecenter, left, top, right, or bottom. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>

#whole { background: radial-gradient(at right, #400, Bisque); }

</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

The Coordinates of the Center of a Radial Gradient

Instead of a one-directional location of the center, you can specify the center using X and Y coordinates. To do this, after the at keyword, provide two values separated by an empty space. The values can be provided as HTML-based numbers. Here is an example:

background-image: radial-gradient(at 80pt 80pt, #000, White)

If you want or need, you can specify the shape of the radial gradient. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole { background: radial-gradient(circle at 80pt 80pt, #000, White); }
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

Instead of constant values, the coordinates can be provided as percentage values.

The Center by a Relative Side

Instead of a fixed value, you can indicate that the center would be positioned relative to a side or corner. This factor is specified by the first argument. The available options are closest-side, farthest-side, closest-corner, or farthest-corner. Here is an example:

background-image: radial-gradient(closest-side, Indigo, LavenderBlush)

If you want or need, you can indicate the shape by preceding the position with it. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole
{
    background: radial-gradient(circle closest-side, Indigo, LavenderBlush);
}
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box

The Ratio of Intensity of a Radial Gradient

As done for linear gradients, you can specify how much space a gradient color would cover. This is provided as a percentage value after the color. Here is an example:

background: radial-gradient(farthest-corner, Crimson 20%, Gold 65%)

If you want or need, you can specify the shape from the center. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole
{
    background: radial-gradient(circle farthest-corner, Crimson 20%, Gold 65%);
}
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result in Firefox:

The Radial Gradient Colors of a Box

The Repeating Radial Gradient

You can create a radial gradient that repeats itself. This is done using a function named repeating-radial-gradient. Here is an example:

<html>
<head>
<title>Exercise</title>

<style>
#whole { background: repeating-radial-gradient(circle farthest-corner, Crimson 20%, Gold 25%); }
</style>
</head>
<body id="whole">

</body>
</html>

This would produce:

The Radial Gradient Colors of a Box

Here is the result from Firefox:

The Radial Gradient Colors of a Box