How To Create Image Overlay Text Effects with CSS

If you want to use a cool texture or image for all your headings, what can you do? Images wont break into multiple lines like responsive text, and too many photos can really drag down your websites speed. But fear not fellow designer! This weeks tutorial will help you create a cool text effect, using an image to overlay your text, so you can keep that unique style and readability.

But before you get all excited and just copy and paste that code without watching the tutorial, I have a word of caution for you: self-hosted. You need to upload the image you want to use as a custom file in your squareness site. Yeah, technically you can use any image URL from the world wide web, but that means someone else is in control. They can rename it, move it, or take it down completely, and you wont be able to do a thing... well, other than panic for a hot second about why your headings dissapeared. And that does NOT sound like fun. So, save yourself from the drama - upload your texture or image as a custom file and use your own URL for this code.

If you are still new to CSS and don't know how to upload a custom file, I got you covered in the video below. So check it out below, and let me know what you think! If you used it on a site I would love to see it - share it in the comments below so all of us an oooooh in awe ♥


 
 

h1 { color: #FFFFFF;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(https://YOURURLGOESHERE.COM) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;}

Ready for more?

Now all of my tutorials are just little excerpts from my numero uno project this year- my CSS Cheat Sheet.

You have probably spent hours tracking down code fixes one by one. Scouring YouTube and Pinterest and Forums for something close enough that you could figure out a way to make it work. That was how I spent the first 5 years of my career, and I am never wasting time like that again.  To make my life way easier (and believe me - it has) I  finally put all my pro tips and tested codes into one PDF and figured hey, other designers need this too!

So, you can join me every week for the next few years,  learning codes bit by bit. Or just download this PDF and get back to building the best website ever.  Here’s a free pro tip fro one designer to another - save your time for your actual design.