How to customize the color of a Squarespace blog post background

Squarespace is a great platform for creating a blog, but the blog post design options are pretty limited. Luckily, we can add custom CSS to make blog posts look even more awesome!

This tutorial will show you how to add a unique & colorful background to a blog post, like the style you can see here on my blog.

i cover quite a lot of options in this tutorial, from the entire article color to isolating the pagination, creating gradients, and more.. You’ll find the base code below, and be sure to check out the related resources for more ideas, like my free guide to gradients.

Here are the codes from this tutorial. Make sure you customize the color s& other values in this code so it matches the unique style of your own website.

article{
  background: linear-gradient(to bottom, #a1d9dd 500px, #e5f5f6 500px)
}
.blog-item-inner-wrapper{
  background:#fff;
  padding:30px
}

To add this code to an individual blog, click on the gear icon next to the blog title to open your blog settings. Select the advanced option and chose post blog item code injection. Paste your custom code here, between style brackets. Here is an example from the tutorial; make sure you customize the colors in this code!

<style>
article{
  background: linear-gradient(to bottom, #a1d9dd 500px, #e5f5f6 500px)
}
.blog-item-inner-wrapper{
  background:#fff;
  padding:30px
}
</style>

Here are some other creative ways you can use the selectors from this tutorial!

article{
  background: salmon
}
.blog-item-inner-wrapper{
  background:#fff;
  padding:30px;
  border-radius: 60px
}

article{
  background: linear-gradient(to bottom, yellow, #e5f5f6)
}
.blog-item-inner-wrapper{
  background:#fff;
  padding:30px
}

article{
  background: #7da56b
}
.blog-item-inner-wrapper{
  background:#fff;
  padding:30px;
  border-radius: 60px;
  border:5px dotted green;
  box-shadow:-20px -20px 20px #111
}