CSS radial-gradient()

The CSS radial-gradient() function is used to define the background-image property, to set gradient colored background, where the colors effect diverging in lines all around, from a center. The first color defined to it, becomes the center color. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {background-image: radial-gradient(red, green, black, purple);
            color: white; padding: 20px;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>background-image: radial-gradient() Example</h2>
      <p>This is an example of <b>background-image: radial-gradient()</b> in CSS.</p>
   </div>
   
</body>
</html>

Output

background-image: radial-gradient() Example

This is an example of background-image: radial-gradient() in CSS.

The word radial means, things arranged like rays or radii of a circle.

CSS radial-gradient() Syntax

The syntax of radial-gradient() function in CSS, is:

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

shape - This parameter is used when we need to define the shape of gradient. The default value is ellipse. One other value that we can define is circle.

size - This parameter is used when we need to define the size of gradient. The default value is farthest-corner. Other three values that we can define are closest-corner, closest-side, or farthest-side.

position - This parameter is used to define the starting position of gradient. The default value is center.

CSS radial-gradient() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g {color: white; padding: 30px 20px; margin-bottom: 20px;}
      #a {background-image: radial-gradient(red, green, black, purple);}
      #b {background-image: radial-gradient(circle, red, green, black, purple);}
      #c {background-image: radial-gradient(closest-side, red, green, black, purple);}
      #d {background-image: radial-gradient(closest-corner, red, green, black, purple);}
      #e {background-image: radial-gradient(farthest-side, red, green, black, purple);}
      #f {background-image: radial-gradient(at 70%, red, green, black, purple);}
      #g {background-image: radial-gradient(circle farthest-side at 70%, red, green, black, purple);}
   </style>
</head>
<body>
   
   <div id="a">
      <h3>background-image: radial-gradient(red, green, black, purple)</h3>
   </div>
   <div id="b">
      <h3>background-image: radial-gradient(circle, red, green, black, purple)</h3>
   </div>
   <div id="c">
      <h3>background-image: radial-gradient(closest-side, red, green, black, purple)</h3>
   </div>
   <div id="d">
      <h3>background-image: radial-gradient(closest-corner, red, green, black, purple)</h3>
   </div>
   <div id="e">
      <h3>background-image: radial-gradient(farthest-side, red, green, black, purple)</h3>
   </div>
   <div id="f">
      <h3>background-image: radial-gradient(at 70%, red, green, black, purple)</h3>
   </div>
   <div id="g">
      <h3>background-image: radial-gradient(circle farthest-side at 70%, red, green, black, purple)</h3>
   </div>
   
</body>
</html>

Output

background-image: radial-gradient(red, green, black, purple)

background-image: radial-gradient(circle, red, green, black, purple)

background-image: radial-gradient(closest-side, red, green, black, purple)

background-image: radial-gradient(closest-corner, red, green, black, purple)

background-image: radial-gradient(farthest-side, red, green, black, purple)

background-image: radial-gradient(at 70%, red, green, black, purple)

background-image: radial-gradient(circle farthest-side at 70%, red, green, black, purple)

CSS Online Test

« Previous Tutorial Next Tutorial »