How to Create a Highlight Text Background Effect with CSS (No Developer Needed!)

How ToCSS

Oct 21

text highlight baackground effect for the blog post cover

Pin this post to Pinterest! ☝🏻

You’ve probably seen it on a blog or two—a word or phrase that looks like it’s been highlighted, with a background color making it stand out. It’s a subtle design trick, but it can make a big difference on your Squarespace website.

Whether you want to emphasize a call-to-action, break up blocks of text, or just make something pop, this effect is a great way to go.

The best part? You don’t need to be a developer to pull this off. I’ve got you covered with some super simple CSS that you can easily drop into your Squarespace site.

Why Use the Highlight Background Effect?

First, let’s talk about why you might want to use this effect. Sure, it looks cool—but it’s also functional.

Why highlight text on your site?

Draw Attention: You can use it to highlight key information, calls-to-action, or special offers.
Readability: It helps your important points stand out, making them easier to skim and understand.
Visual Flow: Highlighting certain text can break up the monotony of regular paragraphs and keep the reader engaged. In a world of constant scrolling, every little bit helps.

So, let’s get into how you can add this design trick to your site!

Psst - if CSS seems daunting and intimidating, download this free beginner’s guide to get you started 👇

Featured

The Basic CSS Code

Let’s start with the basics -

STEP 1:

Go to Website -> System Tools -> Custom CSS and paste the code below in that section -

//highlight words on desktop//
h1 strong {
background-image: linear-gradient(to right,rgba(254,171,218,1) 0%, rgba(254,171,218,1) 100%);
  background-repeat: repeat-x;
  background-position:  0 90%;
  background-size: 100% 30px;
  padding: 0 3px 0 3px;
  font-weight: normal;
  text-decoration: none !important;
}

//highlight words on mobile//
@media screen and (max-width: 767px) {
h1 strong {
background-image: linear-gradient(to right,rgba(254,171,218,1) 0%, rgba(254,171,218,1) 100%);
  background-repeat: repeat-x;
  background-position:  0 90%;
  background-size: 100% 20px;
  padding: 0 3px 0 3px;
  font-weight: normal;
  text-decoration: none !important;
}
}

Step 2: Make It Yours—Customizing the Highlight

Now, let’s personalize it! Maybe you don’t want bright pink. You can easily change the color and adjust the padding to fit your brand.

I wanted a different height for the highlight on mobile view, so that’s why there are 2 sections of code above; one for desktop (the first one) and one for mobile (the second one).

In order to apply the code to a word, you need to bold the word. The code above applies to any h1 text that is bold (that’s what ‘strong’ means in the code). If you want to use it on another type of text besides h1, just change h1 to h2, h3, h4, or p. Be sure to change both the desktop and mobile code.

Here’s some other ways to customize it:

Background Color: The background color is specified in the rgba numbers. Hex colors can’t be used here. Use this HEX to RGB converter to get the color you need. Replace all of the 254,171,218,1 numbers in the code with your color. (Leave the percentages in the code - 0% and 100%)
Background Position: Change the percentage (90%) to change the position of the highlight behind the text. A lower percentage will move it higher up.
Background Size: Change the pixels (30px) to adjust the height of the highlight. You will probably have a different number for the desktop and mobile code.
Padding: Change the 3px to adjust the padding on the left and right. The first 3px adjusts the right side and the second 3px adjusts the left side.

Featured

Real-Life Examples of When to Use Highlight Text

Now that you’ve got the code, you might be thinking, "But where should I use this?" Great question. Here are some ideas to get those creative juices flowing:

Pricing Tables: Use the highlight effect to draw attention to the most popular or recommended pricing plan. This helps guide visitors' eyes to the option you want to emphasize.
Important Info: If you’ve got a Squarespace website with lots of content, highlight key points or deadlines to make sure they don’t get missed.
Quotes or Testimonials: If you’re showcasing customer love, make their words stand out. You worked hard to earn those testimonials—let them shine!

TROUBLESHOOTING

If it’s not quite working for ya yet, here are some things to check:

Be sure you’re using RGB colors and not HEX colors
Be sure the text you want to apply the highlight to is BOLD
Be sure the text you’re applying the effect to is the SAME type of text that is targeted in the code (h1, h2, p, etc).
Be sure there aren’t any characters missing like a comma or parentheses. If one of these is missing, it wont’ work! :)

Conclusion: Simple but Impactful

Adding a highlight background to your text is one of those little touches that can make a big difference. It helps break up the page, draws attention where you want it, and gives your website a more polished feel.

Want more simple design hacks for your Squarespace website? Here’s some of my favorite CSS tutorials.

*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.