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.
We can create transparent text in HTML by either:
- Setting the opacity. E.G.
- Or applying a transparent color. E.G.
<p style="color:rgb(0 0 0 / 0.5)">TEXT</p>
Yes, that simple. Read on if you need detailed examples!
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
EXAMPLE CODE DOWNLOAD
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.
TRANSPARENT HTML TEXT
All right, let us now get into the examples of creating transparent text in HTML and CSS.
<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>
opacityis a decimal value from 0 (invisible) to 1 (opaque).
- Captain Obvious to the rescue –
opacityis 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>
100% opaque, red.
70% opaque, green.
50% opaque, blue.
This is another way to create transparent text. It may be a little intimidating for beginners, but it’s actually straightforward:
rgbstands 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”.
- A number from 0 to 255 –
- As you can see from the above examples, we have a trailing
/ 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.
opacityWill 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.
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!