How To Create A Split Color Background using CSS // Squarespace CSS Tutorial

---
---
---

***
This tutorial shows you how to use CSS gradient effects in a clever way, to 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 in width.

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. Anywho, on to the code!

BRINE TEMPLATES

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

BEDFORD TEMPLATES

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

PACIFIC & YORK TEMPLATES

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

---
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

[InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[madsdresling]

Hi! Thanks for the tutorial. I really want to do this in 7.1 - can you help?

[erinhillmer]

Just found your channel and THANK YOU! Huge help. Question: Does this not work if the pages are under an index page? I added the code via a code block and it doesn't appear when the page is nestled in an index, but does once I pull it out. Is there a snipped I could add to get it to work in an index page? Thanks!

[fionamorrisonphotography]

Hello, do you know the code to be able to make the squarespace 7.1 header color split tone black and white. Please Many thanks

[pearlmurray]

Hi how would you go about if you wanted one side to be an image with parallax scrolling on??

[henlokitty]

Hi, is there a way to do this effect on a cover page? I tried to do the Inject into Header option in Brine, but it did not work.


Or, is there a way to change the background color on a cover page from white to black? I haven't been able to do it, so I had to use one big photo instead. Thank you!

[nickchin]

Hi Does this only apply for squarespace 7.0? Does the css work differently in 7.1?

[xperimentador]

I need a bg nav color at 30% - 70 %
But that does not work like this