Repeating Radial Gradient

#html #html5 #htmltutorial #cssdesign #css #css3 #csstutorials #css3html5 #csstricks #csstutorialscool #cssforbeginners #cssposition #cssflex #FF8A00 #FF0000 #00FF00 #FF8A00

What is radial gradient? radial-gradient() The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse.

In a radial gradient, rather than colors smoothly fading from one side of the element to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape. An example of a radial gradient fading from yellow to green and then to purple.

What is the difference between a radial and a linear gradient? A linear gradient is horizontal, i.e the gradient colors appears as one on top of the other but for the radial, it takes a shape of either an oval or circle. A linear gradient progress in linear way, whereas radial gradient propagate either in a circle or ecliptic way.

The code editor I am using is called Codepen:
https://codepen.io/

For more information about Codepen click on the link down below:
https://en.wikipedia.org/wiki/CodePen

The CSS Code for this project is featured down below:
.gradient {
height: 150px;
background-color: #FF8A00;
background-image: repeating-radial-gradient(
circle at 0 0,
#FF0000,
#00FF00 50px,
#0000FF 20px,
#FF8A00 75px
);
}