Some of the links in this post are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you. All opinions remain my own.
Changing 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.
- Download the Gold background that you want to use, make sure that their background can be used for free to avoid unnecessary lawsuits.
- Upload the Picture that you want to use and copy the file URL address in a notepad.
- 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.
- 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.
background: -webkit-linear-gradient(transparent, transparent),
url(https://url/filename.png ) repeat;
background: -o-linear-gradient(transparent, transparent);
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.