How to use Radial-Gradient in CSS

Hello, coders in this tutorial we are going to learn how to use radial gradient function in CSS. We are also going to show you the example with CSS code.

Whats a Radial Gradient?

Radial Gradient is a function that is used to set a radial gradient to the background. To use the radial gradient you have to use at least two-color to see the effect.

The syntax of this function is given below:

background-image: radial-gradient( shape size at position, start-color, last color);

It is used on either on the background or background-image property in CSS.

The shape size at position is the position and the shape of the gradient. if the user does not specify the value it sets it to the default value which is center.

We can use radial gradient as a replacement for an image in CSS.

You can use it to make your website look more interesting if you do not want to use images as a background . There are many websites that use such property to add some extra effect and touch to their website.

Check below for an example on how to do it and how does it looks like.

Also, read: Moving Background Image Animation CSS Source Code

Using the radial gradient value:

#gradient{
height: 100px;
width:200px;
background-image: radial-gradient(circle,red,green,blue);
}

If we test the above code on our browser, we will see something like you can see in the image below:

You can also check this on your own browser and you will also see something like this.

So that’s it guys hope you guys learned how to use radial gradient in CSS.