How to create a highlighted text effect in Squarespace
For the past few years, we have loved adding a low highlight to CTA’s and other text areas in my design work for an extra pop. However, it always bugged me that you can’t just whip up this treatment on the web without any extra steps. Well, rest assured my friends—this styling is SO simple to achieve with just a few lines of CSS!
Note: this example was originally created using Squarespace 7.0 so if you are currently in 7.1, your dashboard experience may look different but the steps are all the same!
Follow the simple steps below:
Step 1: Head to your main dashboard and head to Design > Custom CSS
Once you are there, you will see a large white box on the left side of the screen where you will place your CSS.
To create this affect, we will have to create a “class” for our highlight along with an opening bracket. Go ahead and paste the below within that CSS code box to achieve this:
.highlight { 
Now that we have our class name in place, we will start to customize how we want our underline to look:
(this includes the hex # (color) that we want our highlight to be, % of how far up we want the highlight to move into our text, ect).
.highlight {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #b1d5da 60%); }
Got it? Sweet! Let’s see this baby come to life.
Head to whatever page you want to place the text that you will be styling on. When you are there and in “edit” mode, hit the plus symbol in the upper right hand corner. Instead of creating a new text box, we are going to create a new “code box”.
You should then see another model pop up that looks like this:
Now, the finishing touch.
Let’s stylize our text.
I am going to choose to use my h1 styling for this exercise so I am going to insert an <h1> tag at the beginning of the code.
Note: you can choose any heading style you wish (h1, h2, h3, ect) just replace things accordingly!
From there, we are going to create a <span> tag and implement our “highlight” CSS class we originally created: <span class=highlight> and of course adding in that closing </span> tag at the end of the code as well.
Let’s put that all together:
<h1><span class="highlight">Hello little highlight</span></h1>
And, tada!
We now have a beautifully styled text with a low highlight!
A few things you can play around with in your CSS class:
You can adjust the % of how high or low you want the highlight to be by editing the initial percentages within the CSS code (right now, we have ours to 60% but this can be edited to achieve a different look)
You can create multiple stylings of this look to include different colors, headline styles, ect. All you would need to do is duplicate this class you already created in your CSS panel and change the name to something else. For example, if you wanted a pink highlight instead of blue, you could call this class “pink-highlight” and edit the hex # to a pink hue within this new class.