How to Add Gold Foil Text to Your Squarespace Website

There is a growing trend to use gold foil and other patterned text within Squarespace websites. A lot of people are achieving this effect by creating their text in a photoshop program and then uploading it as an image. However, there is another way to achieve this look while still having text that is responsive to different screen sizes.

After reading a blog post by The Blog Market, I decided to try and adapt this method to Squarespace sites. With a little help from this blog post by Big Cat Creative, I was able to create gold foil text using a gold image and CSS.

The following video shows you how to achieve this look on your own Squarespace website.

A great place to get your gold foil and other patterns is from https://www.pexels.com/.

The following code is used in the video.

.nameofclass {
  color:#c3a343;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(https://example.com/s/picture.jpg) repeat;
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
}

Here are some other posts you may like:

• How To Get A Full Width Newsletter Block In The Footer Of Your Squarespace Website

• How to Add a Dropdown Box to Your Squarespace Website

• How To Add A Colour Gradient To Your Squarespace Website