Now let’s see how to create Radial Gradient.
Basically, radial has two shapes. radial-gradient, repeating-radial-gradient
CSS has been used to make good use of repeating patterns.
Let’s just add Radial Gradient first. Please press Radial.
In the gradient bar, the Color step on the left indicates the center of the Radial Gradient. The right Color Step means the outermost color.
In other words, the center is transparent, and the more it goes out, the more gray it is.
Let’s change the color. Let me add a few.
There are various colors mixed. Do you understand what it looks like?
Let’s add a repeating-radial-gradient.
Click on the Radial icon where the circle repeats.
Repeat 2 simple Color Steps. It's a little different shape.
Let me add some more colors.
This time a different shape came out. Repeating Radial Gradient makes it easy to repeat multiple colors multiple times with the default Radial Gradient.
Radient Gradient provides a few more utility UIs.
Let’s choose the Gradient first. And below you will get a UI to move the center point of the Radial Gradient.
Shall we move once? Let’s move to the bottom right.
Yes, you can move the center point to where you want it.
And one more feature. That's how Radial Gradient looks.
It can be circle or ellipse type, and various positions can be specified according to the position as below.
The default is the ellipse value.
You feel a lot different? This part is easier to understand than the basic radial rather than the repeating radial. Let’s try it with default radial.
Moving the center point determines the size of the shape of the circle. Is it amazing?
This simple Radial also allows you to create various shapes depending on the position of the center point.
Next time I’ll try Conic Gradient.
sample gradient : https://www.easylogic.studio
github : https://css.easylogic.studio
