Tutorial: Create Outlined Transparent Text With A Background Color Using CSS

Pin this post to Pinterest! ☝🏻

---

OUTLINED TRANSPARENT TEXT WITH A BACKGROUND COLOR

Want to make your website text stand out without going overboard?

Meet the outlined transparent text effect - a sleek, modern style that’s perfect for highlighting text on your Squarespace website.

This effect combines hollow text with a crisp stroke and a bold background color, turning any boring header into a showstopper. Plus, you can add a subtle text shadow to give it that extra punch.

It’s like your text put on its favorite outfit and is ready to make an entrance.

In this quick tutorial, I'll show you how to easily achieve this outlined font effect using some simple CSS. No design skills needed - just the ability to copy/paste.

Let’s get your text looking sharp!

Psst: Want this exact look? The font is Oswald and the hex colors are #FFFC33 (yellow), #FEABDA (pink), and #A2FF33 (green).

HOW TO GET THE LOOK

STEP 1: INSTALL THE CODE

This code will create the effect on any bold words that have the h1 tag. Read on to step 3 to see how to apply it to a different heading text.

Here’s the code that we’ll be using. I’ll explain below how it works, but for now, navigate to Website -> System Tools -> Custom CSS and paste the code below in that section -

//create outlined text with a background color//
h1 strong  {
  font-style: normal;
  text-shadow: 3px 3px 2px #FEABDA;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
}

STEP 2: MODIFY THE CODE TO FIT YOUR BRANDING

The main thing you’ll want to change is the font color. The hex code (#FEABDA) is the color that shows up behind the text. Change this (in the text-shadow setting) to whatever your branding color is.

PRO TIP: Use the Colorzilla extension for Firefox to find out a specific hex color from a website.

The text-shadow property has three numbers… feel free to adjust these to your liking:

• The first number is the horizontal offset of the shadow. A positive value will move the shadow to the right, while a negative value will move the shadow to the left.

• The second number is the vertical offset of the shadow. A positive value will move the shadow down, while a negative value will move the shadow up.

• The third number is the blur radius of the shadow. A higher value will create a more blurred shadow, while a lower value will create a sharper shadow.

Change the text stroke number if you want the outline to be thicker or thinner.

Change the text stroke color if you want the outline to be a different color other than black.

STEP 3: APPLY THE EFFECT TO ANOTHER HEADING TEXT

Currently the code will effect any bold words in an h1 tag. You can change that to h2, h3, or h4 by changing “h1” in the code. If you want to apply it to multiple heading tags, be sure to format the code before the parentheses like this -

h1 strong, h2 strong <- this is correct

h1, h2 strong <- this is incorrect

PRO TIP: I don’t recommend applying this to paragraph text because it’s usually too small to see the effect and ends up looking cluttered.

Want more CSS? Download this freebie below 👇

TROUBLESHOOTING

If the word isn’t changing to the outline effect, be sure these things are in place:

• The heading text you want to change is labeled as the same heading text in the code (that they’re both h1, or h2, or h3, etc.)

• The word that you want to change has been “bolded”. If you do not bold a word, the effect will not show up.

CONCLUSION

And there you have it - outlined transparent text that adds style and flair to your Squarespace website!

This effect isn’t just about aesthetics; it’s about making your text pop against a background color, creating a visual hierarchy that draws the eye where you want it.

Whether you’re highlighting key points or just adding a touch of personality to your headers, this simple CSS trick can make a big impact. So go ahead, play around with the stroke width, tweak the text shadow, and make it uniquely yours.

I’d love to see how you applied it to your site by dropping a link in the comments!

*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.

---