html

Radial Gradients in CSS Explained

Radial gradients show the transitional effect of colors in an elliptical or circular shape. A radial gradient starts from a single point that is usually the center of the circle or ellipse and then a smooth effect of transition is spread around that center point.

A radial gradient can be created by using the radial-gradient() function in CSS. However, CSS allows you to create a repeating radial gradient with the help of the repeating-radial-gradient() function. This article provides a descriptive guide on radial gradients and demonstrates a set of examples that shows the creation of radial gradients in various scenarios.

How to create Radial Gradients in CSS

To create a radial gradient, you have to follow the syntax provided below.

background-image: radial-gradient(shape size at position, color1, color2, ...)

In the above syntax,

The shape parameter denotes the shape of the gradient and it accepts either circle or ellipse (default). The position parameter defines the position of the gradient. The default value of the position parameter is center. The color1, color2 represents the colors used for gradient and with colors, you can specify the stopping percentage for each color, e.g., red 10%.

Lastly, the size parameter describes the size of the gradient ending shape and its value can be one of the following:

  • closest-side: to size a gradient such that it meets the closest side to its center
  • closest-corner: the gradient meets the closest corner
  • farthest-side: the gradient meets the farthest-side
  • farthest-corner(default value): the gradient is sized in a way that it meets the farthest-corner

Let’s practice them to create a radial gradient with multiple properties.

Example 1: Radial Gradient with default parameters

In this example, a radial gradient is created with default parameters values.

HTML

<div>

  <h1> Radial Gradient </h1>

</div>

CSS

<style> 

  div {

  height: 200px;

  background-image: radial-gradient(red, green, lightseagreen);

}

</style>

It can be observed from the above code that only the gradient colors are defined. The shape, position, and color stopping criteria are not defined here.

Output

From the output, it is observed that the gradient originates from the center(as it is the default position) and spreads in an ellipse(default value).

Example 2: Customized Radial Gradient

This example shows the creation of a radial gradient with a customized set of parameters’ values.

HTML

<div>

  <h1> Radial Gradient </h1>

</div>

CSS

div {

  height: 200px;

  background-image: radial-gradient(circle closest-side at 20% , red, green, orange);

}

</style>

The above CSS code creates a radial gradient that contains the following properties:

  • the shape style is set to circle
  • the gradient ending shape is defined by the closest-side
  • the starting position of the gradient is set to 20% (by default it is aligned as center)

Output

The output shows that the gradient originates from the position set to 20% (of the total length of the gradient). Moreover, the gradient shape ends at the closest side from the center, and thus the last color(orange) spreads around the whole shape as the gradient ends.

Example 3: Repeating Radial Gradient

The repeating-radial-gradient() function allows having a repeating effect of the radial gradient. The following code is practiced to get the repeating-linear-gradient() effect.

HTML

<div> 

  <h1> Radial Gradient </h1>

</div>

CSS

<style>

  div {

  height: 200px;

  background-image: repeating-radial-gradient(circle, green 5%, orange 10%);

}

</style>

In the above CSS code, a repeating-radial-gradient() function creates a gradient that has a circular transitioning effect with green color stopping at 5% and orange color stopping at 10%.

Output

From the above output, the radial gradient is being repeated with each repetition containing the same properties.

Conclusion

A radial gradient in CSS creates transitional effects in the form of a circle or ellipse. The radial-gradient() function in CSS allows you to create a radial gradient with various properties. The radial gradient originates from a point and can be expanded in a circle or ellipse shape. Apart from this, the repeating-radial-gradient() function allows you to add repetitive gradient lines. In this guide, we have practiced a set of examples that demonstrate the usage of radial-gradient() and repeating-radial-gradient() to create a radial gradient with various properties.

About the author

Adnan Shabbir