css gradient is defined by default in the background-image property.
the gradient is an image.
You will be able to create a pattern using the css background property.
Let’s take a moment to look at the ui, where you can control the background property.
There are several properties for controlling background-image.
- Blend : Specifies blend mode.
- size : Specifies how background-image is populated.
- x,y : Determines the position of the background-image.
- width, height: Determines the size of the background-image.
- repeat: background-Specifies the repeating pattern of the image.
Now let’s make some simple patterns.
The above pattern is simply applied to width and height. Repeat all the basic properties of the repeat, so it looks like it is vertical and divided by width only.
Let’s tweak ui, which is angled in the linear gradient tool.
Are you aware of the current state of the image? ^^
The repeat attribute determines the pattern to repeat. I’ll apply some simple repeats.
This is a non-repeating state. width, and height.
This is background-repeat: repeat-x;
This is background-repeat: repeat-y;
You can also move the location of the background-image. You can set the x and y properties.
You can specify the current position of the background-image by setting the x, y properties as shown above.
And dragging ui makes it easier to set up. So far, I have introduced ui, which is not explained when introducing gradient. The ui was ui, which adjusts the position of the background-image.
A background-image that is not fully filled can be moved. If you look at the image, there is a draggable area to the left. You can move the background-image to the desired location by dragging the area with the mouse.
So far we have seen how to iterate over the background-image pattern.
In the next, I’ll look at some of the more interesting css settings.
sample gradient: https://www.easylogic.studio
css gradient editor : https://css.easylogic.studio
github : https://github.com/easylogic/css
