How to change the style of your blog post title

Squarespace automatically matches your blog titles to your H1 style, but in this tutorial, I'll show you how to break free from those constraints using both the Site Styles menu and some fun CSS tricks!

Before we jump into the creative CSS effects, let's start with the built-in customization options that many Squarespace users overlook:

1. Navigate to Site Styles → Fonts → Assign Styles

2. Scroll down to find "Blog Post"

3. Click into the title section

4. Choose "Custom" from the dropdown to unlock:

   • Font family selection

   • Font weight and style

   • Line height and letter spacing

   • Text transform options

   • Custom sizing

You can also edit the color of the blog post title using your color theme options, inside your site styles menu.

While those additional options give us some flexibility, we can do even more with custom code! in the tutorial below, you’ll learn how to create a gradient blog post title, how to create an outline text effect, and how to create the splice text effect, too. The codes for each style are below, but if you are new to code, make sure you watch the tutorial so you understand how to add them to Squarespace and how to customize them to make them match your own unique style.

Gradient Text Effect

Pro tips for modifying gradient text codes:

• Customize colors using hex codes or web-safe color names

• Adjust gradient direction (to left, -15deg, etc.)

• Experiment with multiple color stops

.entry-title{
  background: linear-gradient(-15deg, #a1d9dd, green);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Outline Text Effect

Pro tips for modifying the outline text effect:

• Adjust stroke width for different effects

• Change outline color to match your brand

• Keep readability in mind when selecting stroke width

.entry-title{
  -webkit-text-stroke: 3px #a1d9dd;
  color:transparent!important
} 

Splice Text Effect

Pro tips for the splice text effect:

• Experiment with horizontal and vertical offset values

• Match shadow color to your brand palette

• Balance offset with stroke width for optimal effect

.entry-title{
  -webkit-text-stroke: 2px #333;
  color:transparent!important;
  text-shadow:  5px 5px 0px yellow;
}