Summary

This tutorial demonstrates how to create a two-color split background using CSS.

Abstract

The article is a step-by-step guide on how to divide a webpage's background into two distinct colors using CSS. It begins by instructing the removal of default padding and margin from elements to ensure a clean layout. The core technique involves using a linear-gradient within the background property, specifying the direction and color stops to achieve the split effect. The tutorial explains how to apply this to the entire screen, as well as to a custom-sized container. It also shows how to switch the split direction from vertical to horizontal. The tutorial emphasizes simplicity and provides visual examples of the final result, along with a YouTube video tutorial for further clarification.

Opinions

The author believes that creating a split background is straightforward and does not require complex code.
The use of percentages in the linear-gradient function is highlighted as an effective way to control where each color starts and ends.
The tutorial suggests that using 100vh for height ensures the background takes up the full viewport height, which is ideal for creating immersive full-screen layouts.
The author's choice of colors (pink and paleturquoise) in the example is likely to convey that the technique can be used for both subtle and vibrant color combinations.
By providing both written instructions and a video tutorial, the author demonstrates a commitment to accessibility and a recognition that different learners may prefer different formats.

How to Split a Background Into 2 Colors with CSS

In this tutorial, I’m going to teach you how to split the background into two colors. Don’t worry, this is very simple and it doesn’t require any complicated code. Let’s dive right in.

CSS:

Remove the default padding and margin from the elements.

*{
  padding: 0;
  margin: 0;
}

If you want the split background to take up the entire screen, set the body width to 100% and height to 100vh. The actual splitting of the background is done by using background with an option of linear gradient. Linear gradient takes in the following five parameters: direction, color, color, color, and color. Like so:

background: linear-gradient(direction, color, color, color, color);

If you set direction to “to right”, it will display the colors vertically. The other 4 parameters are self explanatory, just insert the colors you want to use. For example, I used pink, pink, paleturquoise, and paleturquoise.

body{
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
}

You may have noticed that after each color, I used a percentage. The percentage represents where you want the color to start and end. Notice I started pink at 0% and ended it at 50%; This means pink will take up the first half of the screen. Paleturquoise starts at 50% and ends at 100%; This means paleturquoise will take up the second half of the screen.

Here’s the result:

To split the background horizontally, change the first parameter from “to right” to “to top”.

body{
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to top,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
}

This is what you’ll get:

If you want to split the background of a container with a custom width and height, go into your HTML file and create a div with a class name of container.

<div class="container"></div>

In the CSS file, replace the body selector with container and change the width and height to whatever you want.

.container{
  width: 400px;
  height: 300px;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
}

This is what it looks like now:

Not making sense? Check out my tutorial below.