How to Change the Text Highlight Color in Squarespace with CSS

What makes an effective website for a growing small business? Of course the copywriting is important to communicate your value to your prospective customers and clients. You also want a simple and clear layout so all of your content is easy and intuitive to find. And don’t forget the importance of an eye-catching design that sets the tone for a high-quality experience.

That’s all fine and dandy, but how can you really make yours stand above the rest?

Often times, it’s the small little details that can have a huge impact when levelling up your Squarespace web design.

It’s the simple things that make the big difference

One of the easiest design updates you can add to your website is incorporating a custom highlight color to your website. This is the color that shows whenever you highlight text on a web page; the default color for most browsers like Chrome and Firefox is a blue color, which may not necessarily mesh well with the brand colors you’ve established for yourself.

Customizing this color with some custom CSS is an easy way to create a more cohesively branded website experience while giving your website that extra something special.

Take a look at it in action below, or even try highlighting some text on this page!

Keep scrolling to see how to achieve this look for your website using one simple custom CSS snippet.

How to Change the Text Highlight Color in Squarespace

With the below CSS code snippet, you can get this look on your Squarespace 7.0 or Squarespace 7.1 site—it works for both! In fact, this snippet would work on a WordPress, Shopify, or Wix website, or any other platform that allows you to insert custom CSS snippets.

Step 1. Visit your Design Menu through the main site settings. Then visit the Custom CSS panel and paste in the code below. Note the hex color code can be customized to your preferred color.

/*Custom Highlight Color*/
::-moz-selection { /* Code for Firefox */
  background: #f2ddaf;
}

::selection {
  background: #f2ddaf;
}

Step 2. Be sure to save your changes and refresh your page, the highlight feature should now be working!

How easy was that!? If you’ve added a custom highlight color to your website, let us know in the comments below so we can check it out!