A gradient background is an easy way to show a bit of style and give and extra bit of flare to your SquareSpace site.

I’m going to give you the exact code that you need to make this happen – but before I do, you need to make sure that you are taking advantage of index pages in one of the Brine family templates.

That’s where we are adding this gradient – into a page that is acting as a section of a larger whole in an index page. (For more info on index pages, head over to the SquareSpace support page all about them here.)

Adding your code

You’ll be adding your CSS code under Design -> Custom CSS

This is the code that you need:

#URL-slug {background: linear-gradient(180deg, #COLOR 5%, #COLOR 90%);}

This is what you’ll need to modify: 

  1. #URL-slug is the page slug where you want the background to be added. You find this in the page settings of an index page.
  2. #COLOR will be the HEX code of the colors you want to use in your gradient. Pick two that complement each other – one lighter, one darker and tweak them until you like the look of the gradient

And oila! Now you have a gradient background. That wasn’t so hard, right?