How to Add Text Shadow in Squarespace

Adding a shadow to your text in Squarespace is an easy way to bring a custom, professional vibe to your site—and in this tutorial, I’ll show you exactly how to do it! Whether you want a soft glow, a dramatic layered effect, or just a way to highlight part of a sentence, this video has you covered.

You’ll learn the basics of how text-shadow works in CSS, how to adjust each part of it (offsets, blur, and color), and even how to create multi-level shadows for an advanced layered effect. I’ll also show you how to target just one piece of text, like a specific block or a specific word in a sentence. If you want that “this-looks-custom-built” vibe for your website, this one’s for you.

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 text-shadow values work in CSS

The text-shadow property uses four main values, and you can totally customize each one to create different effects. Here’s what each part does:

• Horizontal offset: This controls how far the shadow moves left or right. A positive number (like 5px) moves it to the right, and a negative number (like 5px) moves it to the left.

• Vertical offset: This controls how far the shadow moves up or down. Positive values push it down, negative ones pull it up.

• Blur radius (a.k.a. spread): This softens the shadow. 0px will make the shadow crisp and sharp (like a copy of the text), while a higher number adds that soft glow effect. Try 5px or 10px to start.

• Color: You can use a named color like red, a hex code like #000000, or an RGBA value like rgba(0, 0, 0, 0.5) for a partially transparent effect.

💡 Pro tip: Want a more dramatic or layered look? You can stack shadows by separating them with commas! For example:

/* multi layer text shadow from insidethesquare.co */
h1 {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5), 4px 4px 10px rgba(255,0,0,0.4);
}

---

Targeting a specific content block using a block ID

Don’t want that shadow 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 text shadow from insidethesquare.co */
#block-yui_1234 * {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5), 4px 4px 10px rgba(255,0,0,0.4);
}

---

Styling only part of a sentence with a shadow

What if you want to add a shadow just one word in a text block? 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 shadow text code from insidethesquare.co */ 
h1 em {
  text-shadow: 2px 2px 6px #ff69b4;
  font-style: normal;
}