There are various different methods that you can use to make a two color background in CSS. However, the simplest approach is to use CSS linear-gradient() function.
With the help of the linear-gradient() function, we can very easily apply two or more colors to the background of an element.
The linear-gradient() function needs two basic parameters:
- Gradient direction
- Color stops
The gradient direction represents the direction along which the gradient will progress within the element. The default value of the gradient direction is to bottom.
Other values can be to top, to left, to right, to bottom left, to bottom right, and so on.
You can also specify the gradient direction as an angle. A value of 0deg is equivalent to to top. The other values can be calculated by increasing the angle in the clockwise direction. It means, 90deg is equivalent to to right, 180deg is equivalent to to bottom and so on.
The second parameter represents the color stops. There can be two or more color stops. You can also specify the point where the color should stop.
For example, if you specify red 50%. It simply means that the red color would stop at 50% of the element width or height. We will use this concept to make a two color background.
So, if we want the element background to split in the red and yellow color, the very first thing we need is the direction of the gradient. Let’s take it as to right.
Next, we want the gradient to start with the red color, therefore, the first color stop would be red 0% or simply red. Now we want to keep the red color up to 50% width, therefore, the second color stop would be red 50%.
Now, for the next half, we want to put the yellow background. Therefore, the third color stop would be yellow 50%. But we want keep growing with the same yellow color. Therefore our fourth color stop would be yellow 100%.
Try out this working example:
Example:
div{
background: linear-gradient(
to right,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
You can reverse the two background colors by simply changing the gradient direction from to right to to left. See this example:
Example:
div{
background: linear-gradient(
to left,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
Split the Two Background Colors Horizontally
You can also divide the two colors horizontally by simply specifying the gradient direction as to bottom or to top.
See this example:
Example:
div{
background: linear-gradient(
to bottom,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
Split the Two Background Colors Diagonally
You can also split the two background colors diagonally by specifying the gradient direction as any of the four corners i.e. to top left, to top right, to bottom left & to bottom right.
Here is an example with to bottom right gradient direction:
Example:
div{
background: linear-gradient(
to bottom right,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
You can get just the opposite result of the above example by specifying the gradient direction as to bottom left:
Example:
div{
background: linear-gradient(
to bottom left,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
Split the Two Background Colors Diagonally using the Gradient Angle
With the corner values like to bottom right and to bottom left, you can only create the two colors background at an angle of 45 degrees.
But you might sometimes go with a different angle value such as 20, 30, 60, 80, etc. In such situations, we can specify the gradient direction as an angle value.
See this example:
Example:
div{
background: linear-gradient(
20deg,
red 0%,
red 50%,
yellow 50%,
yellow 100%
);
padding: 50px;
text-align: center;
color: black;
}
