How to make text transparent (HTML/CSS)

Question

Ive been trying to make my text transparent so that it it becomes the exact same color as my color changing background. Below is the code that I'm working with; your help will be greatly appreciated.

<body>
<ul>
 <li><a href="mission.html" id=navbar>Dummy Text</a></li></ul>
</body>

<style>
body{
  animation: 10000ms ease-in-out infinite color-change;  padding: 5px 5%;
}

@keyframes color-change {
  0% {
    background-color:#0047ff;
  }

  50% {
    background-color:#6f0ce8;
  }

  100% {
    background-color:#0047ff;
  }
}


ul {
  list-style-type:none;
}

#navbar{
  font-weight: bolder;
  font-size: 33px;
  background-color: black;
  color: white;
  border-radius: 0.9rem;
  margin: 0.9rem;
  transition: 0.3s;
  text-decoration:none
}
</style>

This question may be a duplicate of [https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css](https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css) but you could use `opacity: 0`. — luek baja, Nov 06 '21 at 02:13
Just to clarify - you want the navbar itself to be black but the text within it sort of 'punch a hole' in the black so that the changing background colors of the body show through - is that right? — A Haworth, Nov 06 '21 at 08:11
Does this answer your question? [How to change text transparency in HTML/CSS?](https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css) — Pvria Ansari, Nov 06 '21 at 09:18

score 0 · Accepted Answer · answered Nov 06 '21 at 08:53

One trick is to cut out the background of an element using text masking.

In this case we give the a elements within each li the same background (i.e. animation) as you've given the body.

Make the color in the a element transparent and it will mask out its background, making it look as though the background is the same as the body.

body {
  animation: 10000ms ease-in-out infinite color-change;
  padding: 5px 5%;
}

@keyframes color-change {
  0% {
    background-color: #0047ff;
  }
  50% {
    background-color: #6f0ce8;
  }
  100% {
    background-color: #0047ff;
  }
}

ul {
  list-style-type: none;
}

li a {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: 10000ms ease-in-out infinite color-change;
  padding: 5px 5%;
}

#navbar {
  font-weight: bolder;
  font-size: 33px;
  background-color: black;
  color: white;
  border-radius: 0.9rem;
  margin: 0.9rem;
  transition: 0.3s;
  text-decoration: none;
}

<body>
  <ul id="navbar">
    <li><a href="mission.html">Dummy Text</a></li>
  </ul>
</body>

Note: to get exact accuracy we'd need to change the positioning of the background very slightly - the illusion works in the case above because the navbar is near the top of the body and the linear gradient doesn't change much so it's more or less in the right place.

How to make text transparent (HTML/CSS)

1 Answers1