Transparent Text In HTML CSS (Simple Examples)

Welcome to a quick tutorial on creating transparent text in HTML and CSS. Once upon a time in the Stone Age of the Internet, transparency was a mystery. But today, it is very easy to achieve with just a single line of CSS.

Yes, that simple. Read on if you need detailed examples!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

1) OPACITY

<div class="demo">
  <p>100% Opaque</p>
  <p style="opacity:0.7">70% Opaque</p>
  <p style="opacity:0.5">50% Opaque</p>
  <p style="opacity:0.3">30% Opaque</p>
</div>

• opacity is a decimal value from 0 (invisible) to 1 (opaque).
• Captain Obvious to the rescue – opacity is 1 by default.
• We can still apply font size, weight, background color as usual.

 

2) TRANSPARENT COLOR

<div class="demo">
  <p style="color:rgb(255 0 0)">100% opaque, red.</p>
  <p style="color:rgb(0 255 0 / 0.7)">70% opaque, green.</p>
  <p style="color:rgb(0% 0% 100% / 50%)">50% opaque, blue.</p>
</div>

This is another way to create transparent text. It may be a little intimidating for beginners, but it’s actually straightforward:

• rgb stands for the 3 basic colors – Red, green, and blue.
• We are essentially mixing different amounts of RGB to create various colors here. There are 2 ways to “define RGB”:
  • A number from 0 to 255 – rgb(255 0 0) simply means “maximum amount of red, no green and blue”.
  • In percentage – rgb(0 0 100%) will mean “maximum amount of blue, no red and green”.
• As you can see from the above examples, we have a trailing / 0.7 and  / 50%. Shouldn’t be much of a mystery, that is the opacity.

 

 

3) OPACITY VS TRANSPARENT COLOR

<div class="demo" style="opacity: 0.3">
  Opacity will apply to the entire element.
</div>

<div class="demo" style="color:rgb(0 0 0 / 0.3)">
  Color will only apply to the text.
</div>

Some of you guys may be thinking “rgb is so stupid and complicated, I will just use opacity“. But no, take note of the stark difference here.

• opacity Will apply to the entire container. Yes, everything you put into the container – Text, images, videos, even background.
• color:rgb() Will only apply to the text. This is much cleaner, and will give you more controls.

 

 

 

LINKS & REFERENCES

• Opacity – MDN
• RGB – MDN
• HTML Transparent Image – Code Boxx