Create A Split Color Page Background

I like to stay current on design trends, but sometimes I am late to the party. This one has been around a while, but from the looks of things, it’s not going away anytime soon. Using CSS gradient effects in a clever way, you can actually create a vertically split color page background with one color on the left and one on the right, all the way down the page!

Now before you copy and paste this into your site, I want to talk about mobile too. To keep a site looking great on all devices is an unwritten code of honor that designers need to uphold. And sometimes a split color background on a tiny screen looks, well, terrible. So this weeks CSS tutorial is two fold - one code to split the background into two colors, and another to revert it back on any screen smaller than 640px

As a designer you have full flexibility on this - no need to use the second mobile code if you like the look. I do recommend testing your design among friends and on a few device layouts before you decide to split the screen on everything.

One quick note - not all themes use the same code! Be sure to check out this article on Squarespace templates and their themes to ensure you are using the correct code for your template’s theme.



.Main {background: linear-gradient(90deg, #000000 50%, #FFFFFF 50% ); } @media only screen and (max-width: 640px) {.Main {background: #FFFFFF !important }}


#siteWrapper{background: lineargradient( 90deg, #000000 50%, #FFFFFF 50% ); } @media only screen and (max-width: 640px) {#siteWrapper {background: #FFFFFF!important }}


#page {background: linear-gradient(90deg, #000000 50%, #FFFFFF 50% ); } @media only screen and (max-width: 640px) {#page {background: #FFFFFF!important }}

Ready for more?

This tutorial is one of over 50 code snippets and plugins from my CSS Cheat Sheet! Learn more about my CSS Cheat Sheet project and how you can get your hands on your own copy;