How to create a text outline in Squarespace

In this tutorial, you’ll learn how to add an outline to any text on your site using a quick CSS snippet, plus how to fine-tune the color, weight, and opacity of that effect. I’ll also show you how to target a specific block with an ID (great for isolating the effect), and even how to outline part of a sentence for a unique look.

Check out the tutorial video below to see how these codes work, and when you’re ready to try this on your own site, you’ll find more info and copy + paste codes under the video.

How the Outline Effect Works

The secret to this effect is using the -webkit-text-stroke property. When paired with color: transparent, it gives the illusion that your text is just an outline—no fill.

• color: transparent; removes the fill so you can see the background behind the text

• -webkit-text-stroke: 1px black; adds a 1-pixel black border around each letter

You can adjust both of these! Make the outline thicker with 2px, or use any color you want—like red, white, or even a hex code like #ff6b6b.

/* text outline example from insidethesquare.co */
h1 {
  color: transparent;
  -webkit-text-stroke: 1px black;
}

Making the Fill Semi-Transparent

If you want just a hint of fill color, you can use an rgba value instead of transparent. This is great for keeping the outlined look while letting a subtle color peek through.

• rgba(255, 255, 255, 0.6) gives you a soft white fill with 60% opacity

• You can change the last number (0 to 1) to increase or decrease the visibility of the fill

• Combine it with a contrasting outline color to keep things readable

/* text outline example from insidethesquare.co */
h1 {
  color: rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 2px #ff6b6b;
}

Pro Tip: You can combine this outline code with a gradient text style! Check out this tutorial for more info: How to create gradient text in Squarespace

---

Targeting a specific content block using a block ID

Don’t want that outline on every heading on your site? You can apply it to just one content block by using a unique block ID.

Here’s how:

1. Install the free “Squarespace ID Finder” Chrome extension. (link will open in a new tab)

2. Turn it on and hover over the block you want to target. Copy the ID (it’ll look like #block-yui_1234).

3. Paste that into your CSS like this code below. Only that block will have the shadow; no other text on your site will be affected. Super handy if you just want to highlight one thing.

/* single block outline code example from insidethesquare.co */
#block-yui_1234 * {
  color: rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 2px #ff6b6b;
}

---

Styling only part of a sentence with a shadow

What if you want to outline just one word in a headline? You can do that by targeting the em tag, which Squarespace uses for italicized text. Here’s how this works:

• h1 em targets only the italicized part of your heading.

• text-shadow adds your custom shadow.

• font-style: normal; removes the italic style so it matches the rest of the sentence—unless you want to keep it italic, then just skip that line.

/* italic text outline example from insidethesquare.co */ 
h1 em {
  color: rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 2px #ff6b6b;
}