Gold Foil or Patterned Text

What does this code do?

This code snippet will allow you to add text with a gold foil or custom pattern.

Choose Your Pattern

First, you will need to find an image containing the pattern you want your text to be. A great place to get your gold foil and other patterns is from https://www.pexels.com/. Upload this image to Design > Custom CSS > Manage Custom Files.

SEO Tip: Be sure to compress this image before you upload it or this will slow down your website. It should not be any bigger than 500KB.

Code Snippets

Copy and paste the following into a Code Block on your Squarespace Website where you would like the text to appear. Change NAMEOFCLASS to a appropriate class name.

<!-- The Whole Sentence or Phrase -->
<h1 class="NAMEOFCLASS">TEXT GOES HERE</h1>


<!-- One Word -->
<h1>TEXT <span class="NAMEOFCLASS">GOES</span> HERE</h1>

Copy and paste the following code into Design > Custom CSS. Replace NAMEOFCLASS with the exact same class name as your used in the code block (make sure to keep the “ . “ before NAMEOFCLASS).

.NAMEOFCLASS {
  color: #c3a343; /* Backup colour in case image doesn't show */
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(IMAGEURL) repeat;
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
  background-size: contain;
}

Customize the colour to match your brand as this will show up if the image doesn’t. Delete the word IMAGEURL, place your cursor between the brackets and click on the image in Manage Custom Files to insert your pattern image url.

How To Use It

1. find an image containing the pattern you want your text to be. Upload it to Design > Custom CSS >> Manage Custom Files.

2. Copy and paste the code snippet as indicated above.

3. Customize the backup colour and insert the image url.

4. Change h1 to target the type of text you want to change.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   • a = Link