What is Conic Gradient? Let’s take a look at the text below.
The
conic-gradient()CSS function creates an image consisting of a radial gradient with color transitions around a center point rather than radiating from the center. — MDN
It is drawn roughly this way.
The conic gradient also supports repeating.
Now, let’s add it in the tool in earnest.
Please select Conic.
The UI is characterized by the ability to set the linear and radial properties.
Shall I change the color once?
In the right Gradient tab, click the icon below once.
Then the following screen appears.
This is because it fills the color with a circle.
A simple pie chart is also possible if you create a circle with a border-radius in the layer.
Let’s add a repeating-conic-gradient.
It shows a dynamic scene because it repeatedly shows a specific interval in a circle.
Let’s also make this a solid color using the Gradient’s cutting menu.
It looks funny.
Here are some more UIs. Basically, you can adjust the angle like linear and move the center point like radial.
Let’s take a look at the actual generated CSS code. Press the CSS tab on the right.
It is simple CSS code.
It’s a simple code, but it’s a Gradient that’s hard to comprehend by code without looking at it. I’m going to add a lot of UIs for my eyes.
So far, I have looked at six gradient types supported by the background-image property.
In the following story, we will look at the usage of the rest of the background, combined with its properties.
sample: https://www.easylogic.studio
CSS Gradient Editor : https://css.easylogic.studio
github: https://github.com/easylogic/css
