Now let's make CSS Gradient a little easier.
First, try to add a Gradient of the desired type in the Gradient tab.
Let’s try to choose Linear here.
Then the gradient bar appears in this form.
The Gradient bar allows you to add color to the desired area. Let’s add a color that actually constitutes a gradient.
Hover your mouse over the gradient bar and it will change to a + shaped icon. Press it in that state.
One color was filled. When filling the color, it may fill in with the color between the Color steps on either side, so there may be no visible markings.
Now let’s click on the color step that we just added.
Selecting this color step allows you to make several settings for each color step.
You will be able to select your own location and the colors in the right tab.
Let’s change it to a blue color.
Each color step can also be dragged and moved.
You can adjust the value in the input field to move it to the desired position. It also supports several units for fine-tuning the properties of the CSS.
You can assign your own color to this location.
We’ve also added a feature for easier control of CSS Gradient.
There is a small line on the left side of the Color Step.
Vertical specifies the manner in which the color gradually changes as in the case of an existing gradient, and is filled with a solid color from the previous color step to the current color step.
Let’s take a sample.
The first blue color step on the left is the conventional method, and the later applied color is filled with the corresponding color.
Here is the code:
The principle is simple. Depending on your choice, you can add another Color step. It makes it easier to create your own desired state.
And for Linear Gradient, it supports tools to rotate.
You can adjust the rotation angle by dragging the tool. Let’s twirl a bit.
So far I have created a simple Linear Gradient.
I will continue to introduce more features in the next article.
sample: https://www.easylogic.studio
github: https://github.com/easylogic/css
