Transparent Text In HTML CSS (Simple Examples)

So, you need to add some text over a background but don’t want to “overpower” it? Transparent text is a possible solution, and it can be done easily with color: rgba() or opacity. Let Master Coffee walk you through a few simple examples, let’s go!

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) TRANSPARENT TEXT WITH RGBA

transparent-txt.html
<!-- (PART A) RGBA -->
<style>
.demoA { color: rgba(228, 255, 0, 0.6); }
</style>
<div class="demoA demobg">
  Transparent Text.
</div>
Transparent Text.

This is the easier way, just use color: rgba(RED, GREEN, BLUE, ALPHA) to set the color and opacity of the text.

  • RED, GREEN, BLUE A number from 0 to 255. The respective amount of red, green, blue.
  • ALPHA A decimal from 0 to 1. Where 0 is invisible, and 1 is opaque.

 

 

2) TRANSPARENT TEXT WITH OPACITY

transparent-txt.html
<!-- (PART B) OPACITY -->
<style>
.demoB { opacity: 0.6; }
</style>
<div class="demoB demobg">
  This is the wrong way.
</div>
<div class="demobg">
  <p class="demoB">This is the way.</p>
</div>
This is the wrong way.

This is the way.

  • Yes, creating “anything transparent” in HTML CSS is as easy as setting opacity to less than 1.
  • But take note, opacity will apply to the entire container. That is, everything in the container – Text, background, image, table, lists, videos, etc…
  • To “fix” that, we can create a paragraph and apply opacity on the paragraph only.

 

 

EXTRA) TEXT SHADOW & STROKE

transparent-txt.html
<!-- (PART C) TEXT SHADOW + STROKE -->
<style>
.demoC, .demoD { color: rgba(228, 255, 0, 0.6); }
.demoC { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); }
.demoD { -webkit-text-stroke: 1px #ff0c0c; }
</style>
<div class="demobg">
  <p class="demoC">With shadow.</p>
  <p class="demoD">With stroke.</p>
</div>

With shadow.

With stroke.

One last extra bit, if you want to make the transparent text a little more legible:

  • Add text-shadow (X Y SPREAD COLOR) to the text.
  • For webkit browsers only, add a “text outline” using -webkit-text-stroke (THICKNESS COLOR).

 

 

THE END – NOT A WATERMARK

That’s all for this short tutorial and sharing, a small advice for the beginners before we end. If you want to use this as a “watermark” – Don’t. The transparent text is only overlayed on top of the image itself, people can still do a “save as” and download the image/video without a watermark; If you want to watermark an image/video, hard code it in the media itself.

 

CHEAT SHEET

Transparent Text In HTML CSS (click to enlarge)