Using CSS Background Gradient

There are several gradient properties in CSS to give color transitions to the background. Let's take a look at what they are, respectively, and how they are used.

linear-gradient() - Linear Gradient

As the name suggests, it is used to give a color transition on a linear line. Basically, the simplest use is with a combination of 2 colors. For example, let's create a color transition consisting of orange and lime green.

.box {
width: 150px;
height: 150px;
background: linear-gradient(orange, lime);
}

Change the Orientation of Colors.

By default, it is oriented from top to bottom. To change this, simply specify the direction. The aspects you can specify are:

to top
to left
to the right
to the bottom

Example usage is as follows;

.box {
width: 150px;
height: 150px;
background: linear-gradient(to top, orange, lime);
}

Create a diagonal gradient

Above, I only showed the angles horizontally and vertically. However, it is possible to determine the angle diagonally. Here are the angles you can use:

to top left
to the top right
to the bottom left
to the bottom right

Example usage is;

.box {
width: 150px;
height: 150px;
background: linear-gradient(to top right, orange, lime);
}

Using Angles for Colors

If you want more control in specifying direction, you can use angles. Angles are determined clockwise. That visual will make more sense. So, for example, if we determined the diagonal angles above with deg, their equivalents would be as follows;

to top left - 45deg
to top right - 315deg or -45deg
to bottom left - 225deg
to bottom right - 135deg

You can specify the angle you want in deg units. For example;

.box {
width: 150px;
height: 150px;
background: linear-gradient(70deg, orange, lime);
}

Using more than one color.

I said that we should use at least 2 colors, we can use many more colors than two.

.box {
width: 150px;
height: 150px;
background: linear-gradient(red, yellow, blue, orange);
}

Adjusting the position of colors

If you want to specify the color endings other than the default, you can specify them in px and %. For example;

.box {
width: 150px;
height: 150px;
background: linear-gradient(to right, red 15px, yellow 60px, green 50%);
}

Creating a sharp line

You can set the position of the color to 50% to create a sharp line. You cannot get results in more than 2 colors.

.box {
width: 150px;
height: 150px;
background: linear-gradient(to right, red 50%, green 50%);
}

Color gradients are set to be even by default. In other words, in the color transition from red to blue, it is adjusted to be 50% red and 50% blue transition. However, you can change this.

.box {
width: 150px;
height: 150px;
background: linear-gradient(red, 20%, blue);
}

While it should be 50%-50% under normal conditions, we have set it to 20%-80%.

Creating a color strip.

I told you that you need to use 2 colors to create a gradient of the cake. Now let's see how we can make a color stripe. We will use 2 color stop values for this. So normally we used a single color stop by making red 50%, blue 50%.

.box {
width: 150px;
height: 150px;
background: linear-gradient(lime 25%, blue 25% 50%, orange 50% 75%, rebeccapurple 75%);
}

According to this logic, lime green takes up 0-25%, blue takes up 25%-50%, orange occupies 50%-75%, and purple takes up 75%-100%. If we don't give clear values then we would get blurry color rather than sharp. For example;

.box {
width: 150px;
height: 150px;
background: linear-gradient(lime 20%, blue 30% 45%, orange 50% 70%, rebeccapurple 75%);
}

Using a gradient with the image.

As you know, we could use more than one image, it is possible to blend these images with a gradient. For example;

.box {
width: 150px;
height: 150px;
background: linear-gradient(to right, transparent, rgba(0,255,0,.8)),
url(https://www.codingsource.net/sizeback.png);
}

With this example, we realized that we can use low opacity background colors by using rgba(). It is also possible to switch from transparent to a color with transparent.

Using CSS Background Gradient | CodingSource