If you're looking to add split color backgrounds to your website, there is an easy way to do that with CSS. It's pretty well supported, and makes for a very unique effect. You can add as many sections of color as you want, and because there are gradient, you can choose if they abruptly transition, or fade into each other. First, here is an example of the effect that we're going to make.

See the Pen Split Color Responsive BG by James (@Isotropic) on CodePen.

In this demo, you can see that 1/2 of the screen is purple, and 1/2 of the screen is white. However, we can add as many colors as we want. We can also change the rotation of where the colors split, so it could be a vertical, horizontal, or slanted transition.

The best part is, we don't even need to write out the CSS, or even understand how it works, as we are going to use a free gradient generator tool that is a staple of our web design website bookmarks.

To make this effect, let's talk about how it technically works, and then show you how to generate it yourself. Technically, we are using CSS background gradients, which are supported on most major browsers. The tool that we use will even add support for Internet Explorer 6 and up, which is kind of unheard of in 2021.

These CSS gradients are set to change their color without any distance between them, meaning that there is no fade from one to another period in essence, this makes the gradient a block of color, leading to the effect that you see above. This is a great option if you have content that is set to be a specific page width, but you want your background to expand to the full width of the screen. For example, if you have a 50/50 gradient, that will expand from one end of the screen to another, while your content within will remain at your maximum breakpoint of maybe 1200 pixels.

Now, here is a copy paste of the CSS code that will be used to add this effect. You can use this on a section or a div, just apply it via an ID or a class.

You may be thinking, this is very painful to write out, I might just skip this effect and use a solid background. Luckily, there's an easy way to generate the gradients to create a split background color on any website, supported on pretty much any browser that your visitors are on.

To create your gradient background that results in split colors, simply set the stops to be equal to each other. So in this example, for a 50/50 split background, both of the stops are at 50%.

If we want three equally spaced colors for our background, we would simply have a stop at 33% and they stop at 66%. One color would range from zero to 33, the other would go from 33 to 66, and the following would go from 66 to 100.

You can also manipulate the rotation of this effect to make it a vertical, horizontal, or anything between. The main thing to note here is that you are simply having the stop at the same value. If they are different values, then the color will fade into each other, which is what the CSS gradient is intended to do.

Once you're done creating the gradient, simply copy it from the user interface, paste it into the stylesheet of your website, and assign it to a specific div or section using an ID or a class.