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% opacityYou 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:
Install the free “Squarespace ID Finder” Chrome extension. (link will open in a new tab)
Turn it on and hover over the block you want to target. Copy the ID (it’ll look like
#block-yui_1234
).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; }