CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise


CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

Radial Gradient in CSS

Radial Gradient



For creating a radial gradient, we must have at least two color stops. As we know, radial-gradient is described by its center. By default, the shape of the linear gradient is an eclipse.


What are Color Stops?


Colors stops are basically the colors among which you want to render smooth transitions. There is no limitation on color stops. We can add multiple color stops separated by a comma. We can set the direction of our linear gradient. The direction can be from left to righttop to bottombottom to topright to left, and many more. We can also specify the angle of a linear gradient. By doing this, the linear gradient will start from that particular angle.




Its syntax is:-

< style >


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


< /style >


Further Explanation:-


Value Description
shape Defines the shape of the gradient. For example, circle, ellipse.
size Defines the size of the gradient. For example, farthest-side, closest-side.
position Defines the position of the gradient. The center is by default.
start-color, ..., last-color Color stops are the colors that we want to render with smooth transitions. It consists of a color value, with an optional stop position.

Code Explanation

All Tutorials related to CSS3

All Sections related to CSS