How To Create Gold Foil Text Using CSS

Sharing is caring!

how to create gold foil text with cssChanging your blog text color is one way for you to stand out from the rest, your blog text would show a different color and you can use a particular color to highlight your point.

In this article I would show how to create Gold foil text using CSS if you don’t have any experience in web development, you don’t have to worry as it would only take few minutes and when you are done, your blog would stand out from the rest.

Before I begin, I am sure that you have created your own blog and you are looking to customize it to your taste. If you don’t have a blog yet and you are wondering how to create your blog, you can read this guide which explains how to create a blog using WordPress, Tumblr, blogger and so on.

Read More: How to hide image in blogger

I prefer that you use WordPress as your blogging platform because of the ease of creating your blog and the fact that WordPress is open source and comes with so many free plugins and theme. After some month, you can migrate to a paid plugin to get the best out of these tools.

Let get started, the only limitation to this codes is that it does not work well with Internet Explorer, so if large part of your visitor is not using Internet Explorer, they would be able to see your gold foil text.

  1. Download the Gold background that you want to use, make sure that their background can be used for free to avoid unnecessary lawsuits.
  2. Upload the Picture that you want to use and copy the file URL address in a notepad.
  3. Create a paragraph using HTML and add it to your page and widget, add a CSS class to your paragraph.

<p class=”gold”>blog title</p>

The CSS class of our code is name gold; you can use any name you like.

  1. From your WordPress dashboard, go to Customize> CSS Editor and copy & paste the following code but replace http://url/filename.png with the direct URL to your own image.

.gold-text {


-webkit-text-fill-color: transparent;

background: -webkit-linear-gradient(transparent, transparent),

url(https://url/filename.png ) repeat;

background: -o-linear-gradient(transparent, transparent);

-webkit-background-clip: text;


Or you can use inline CSS, which looks like this:

<p style=”color:#c3a343; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url( http://url/filename.png ) repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text;”>YOUR TEXT HERE</p>

Copy and Paste the HTML codes into any page or widget that you want gold foil text to show.

Your visitor would be able to see gold foil text on your blog and you can change the gold foil text to any other color or pattern you wish, just follow the above step.

If you have any problem or suggestion you can let me know in the comment box below.

4 thoughts on “How To Create Gold Foil Text Using CSS”

  1. Hey,
    lately I have finished preparing my ultimate tutorial:

    +++ [Beginner’s Guide] How To Make A Website From Scratch +++

    I would really appreciate your feedback, so I can improve my craft.

    If you know someone who may benefit from reading it, I would be really grateful for sharing a link.

    Much love from Poland!

  2. I really like your blog.. very nice colors & theme.
    Did you create this website yourself or did you hire
    someone to do it for you? Plz answer back as I’m looking to
    design my own blog and would like to know where u got this from.


Leave a Comment Protection Status Help grow your audience with Constant Contact email marketing