How to Use the Radial Gradient Function in CSS?

quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Overview

I’m sure you’ve heard of it or seen it before, but what is the radial gradient CSS function? The radial gradient css function is used to create a smooth transition from one color to another. To use the radial gradient function in CSS, you'll need the following: a circle or container element, an image, or a combination of both. This article is going to explain the radial gradient function and how to use it in CSS.

A radial gradient is a type of gradient that builds on the linear-gradient function in CSS. The radial gradient css function is used to create a gradient that radiates from an origin point, with the size and shape of the resulting area controlled by two or more color stops.

In CSS, you can create a radial gradient using the radial gradient css function. This function takes several parameters:

  • The first parameter is always where to start the gradient (where 0,0 is in relation to the page). In this case, we want to start at 0 so we will leave this out.
  • The second parameter is how far out from 0 we want our gradient to go. We'll do 50px so that it goes from 50px from 0 (which is 50px from left) to 100px from 0 which is 100px from left).
  • The third parameter is how many colors we want in our gradient. We'll do 2 here so that there are two colors used for the transition of our circle. You can also use 3 or more colors if you want!

Pre-requisites

  • Basic HTML and CSS knowledge will be beneficial but not required.

Learn about HTML and CSS

Syntax

radial-gradient-syntax

Quick Example: For this example, we utilize all the parameters of a radial gradient, i.e., shape, size, position, and colors.

background-image: radial-gradient(circle farthest-side at 60% 55%, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);

Result:

radial-gradient-example

Values/Parameters

The radial gradient css function has four parameters.

1. Shape The gradient might be elliptical or circular in shape. The default shape is an ellipse.

2. Size The gradient's size (ending shape) can be set to one of four values: farthest-corner, closest-side, closest-corner, and farthest-side. The "farthest-corner" size is the default.

radial-gradient-size-variations

3. Placement Set the gradient's location. The default setting is "center."

4. color You can specify as many colors as you want, but at least two are mandatory.

Only the beginning and ending colors are essential among these four parameters. The remaining fields are optional and have default values.

Example

a. Simple gradient

Let's create a simple gradient with default values.

HTML Create an empty div in HTML.

<div id="gradient"></div>

CSS Give that div some height and width. Include colors (at least two) in the CSS radial gradient function and leave the other parameters at their default values.

#gradient {
    height: 150px;
    width: 150px;
    background-image: radial-gradient(red, blue);
}

Output:

simple-gradient

The circular gradient in the output shown above is made up of the colors red (the starting color) and blue (the ending color). By default, it is centered and has the size - farthest-corner.

b. Non-centered gradient

Let's modify the position of the gradient with the position parameter.

HTML Create an empty div in HTML.

<div id="gradient"></div>

CSS

#gradient {
    height: 150px;
    width: 150px;
    background-image: radial-gradient(farthest-side at 20% 10%, red, blue);
}

Output:

non-centered-gradient

As you can see in the above output, we shifted the gradient's center to 20% from the top left and 10% from the top.

Repeating a Radial Gradient

CSS has a function called repeating-radial-gradient that is similar to radial-gradient. It accepts the same parameters as radial gradient, but the colors repeat indefinitely until the container size is reached.

Example

HTML Create an empty div in HTML.

<div id="gradient"></div>

CSS

#gradient {
    height: 200px;
    width: 200px;
    background-image: repeating-radial-gradient(red, blue 10%);
}

Output:

repeating-radial-gradient2

Radial gradient is repeated until it reaches the container size in the output shown above.

Building Background Patterns with CSS Radial Gradient

You can make beautiful circular patterns by using the radial gradient css function. We can generate different results by adjusting the radial gradient function's parameter values.

Let's look at some patterns that you might find interesting.

Simple pattern

simple-pattern

Here, we give a circle a radius of 50% and set the container height to '100px.' The above pattern is produced by these two configurations.

Below is the code for the above pattern:

html {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(50% 50%,  #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
}

Circular Zig Zag

circular-zig-zag-pattern

Using two radial gradient css functions that overlap each other, a circular zig-zag pattern can be generated. Then we divide each gradient in half and move the second gradient by half the size of the gradient.

html {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(50px at 50% 100%,  #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #0000), radial-gradient(50px at 50% 0%,  #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #0000);
   background-position: 0 0, 50px 0;
}

Bullseye board

bullseye-board-pattern

The bullseye board pattern is easily created using repeating-radial-gradient() and a combination of transparent and main colors.

html {
    height: 100px;
    width: 100px;
     background-image: repeating-radial-gradient(#0000 0% 15%, #e16b5c 15% 25%);
}

More Examples

Let's see a few more examples.

Simple Circle

simple-circle

By making the final color transparent, you may make a simple circle with the radial gradient css function.

#gradient {
    width: 550px;
    height: 450px;
    background-image: radial-gradient(100px circle at center, red 50%, transparent 51%);
}

Simple Ellipse

simple-ellipse

You may make an ellipse by changing the shape from a circle to an ellipse.

#gradient {
    width: 550px;
    height: 450px;
    background-image: radial-gradient(ellipse at center, red 50%, transparent 51%);
}

Evenly-spaced colors

evenly-spaced-colors

Using the default values for all attributes, create an equally spaced color gradient.

#gradient {
    height: 250px;
    width: 250px;
    background-image: radial-gradient(#1f005c, #5b0060, #870160, #ac255e);
}

Conic gradient

conic-gradient2

Conic gradients are similar to radial gradients in that color transitions occur at an angle around a center point.

#gradient {
    height: 250px;
    width: 250px;
    background-image: conic-gradient(#1f005c, #5b0060, #870160, #ac255e);
}

Browser Compatibility

The radial gradient css function is supported by all the popular browsers. Only the at syntax is not supported by Safari.

Conclusion

Let us review what we have learned.

  • The radial gradient function is used to create a smooth transition from one color to another.
  • To use the radial gradient function in CSS, you'll need the following: a circle or container element, an image, or a combination of the two
  • We saw examples of simple, non-centered, and repeating radial gradients.
  • We made a few patterns with radial gradients.
Challenge Time!
quiz
quiz
Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.
Free Courses by top Scaler instructors
rcbGet a Free personalized Career Roadmap from