Background-clip: text; isnt working at all in css

Question

.test{
  color: transparent;
  font-size: 50px;
  font-weight: bold;
  transition: 0.5s;
  background-clip: text;
  background: linear-gradient(to right, green, blue);
}

<p class="test">Hello</p>

also when I type background-clip: and the autocomplete options come up for example: border-box, 'text' doesn't come up there at all and I've tried it on Microsoft Edge and Chrome and it still doesn't do anything at all is there any way to fix this?

I tried rearranging the properties in the CSS file and I used a new browser but that still did nothing at all

Answer 1

Your CSS code is addressing the name class, but your p element has the test class. Change one so that they match.

Additionally, you may need to add the -webkit-background-clip CSS property for this code to work on Chrome. An example of the code functioning is shown below.

.name {
  background: linear-gradient(to right, green, blue);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  font-size: 50px;
  font-weight: bold;
  transition: 0.5s;
}

<p class="name">Hello</p>

Answer 2

I think your problem is browser support. After a quick Google search, I found:

The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element.

So to fix your problem simply add:

-webkit-background-clip: text;

.test {
  width: fit-content;
  margin: 0;
  font-size: 150px;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(to right, green, blue);
  -webkit-background-clip: text;
  background-clip: text;
}

<p class="test">Hello</p>