How to Split a Background Into 2 Colors with CSS

In this tutorial, I’m going to help give your website a facelift by teaching you how to split the background into two colors. Don’t worry, this is very simple to do and it doesn’t require any complicated code. Let’s dive into the tutorial.

HTML:

We really don’t need to add anything in the HTML file to make this work but let’s add a message just so you can see that we can add text over the split background just like any other ordinary background.

<h1>YOUR CONTENT GOES HERE!</h1>

CSS:

Remove the default padding and margin from the elements.

*{
  padding: 0;
  margin: 0;
}

Now set the height of the body element to a minimum of 100vh so the split background can cover the entire size of the window. The actual splitting of the background is done by using the ‘background’ CSS property with an option of linear gradient. Notice we’re using ‘to right’, this means our colors will display vertically. But how do we set the two colors? We set our first color of ‘pink’ from 0% to 50% and start the second color of ‘paleturquoise’ at 50% to 100%. The flex box properties were added only to place the text in the middle of the screen.

body{
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

Here’s the result:

If you want the background split horizontally instead of vertically, change the option within the linear-gradient from ‘to right’ to ‘to top’. Here’s the new output:

Okay, that’s great but what if we want to split the background of a ‘div’ with a custom width and height as oppose to the entire screen? I’m glad you asked, go back to the HTML file, create a ‘div’ with a class name of container, and place the message inside.

<div class="container">
  <h1>YOUR CONTENT GOES HERE!</h1>
</div>

In the CSS file, replace body with ‘.container’ and change the width and height to whatever you want, I went with 600 x 400.

.container{
  width: 600px
  min-height: 400px;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

This is what it looks like now:

Not making sense? Check out my tutorial below.