Fakhr Ali
Fakhr Ali

Reputation: 21

Validation (CSS 3.0) "text" is not a valid value for the "-webkit-background-clip" property

So this is my code:

font-size: 44px;
font-weight: 500;
background: linear-gradient(to-right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

I wanted to use the background clip property to clip the background to the text. Problem is visual studio is not recognizing the text property. What can I do to fix this?

Upvotes: 1

Views: 1488

Answers (2)

Ryan
Ryan

Reputation: 835

This could also have to do with the fact that background-clip: text is an experimental feature, according to MDN docs

MDN docs for background-clip

Upvotes: 1

Jake B.
Jake B.

Reputation: 444

You need to make sure you are setting the background-clip property on the parent text element i.e. <p> tag then you can apply the background color as a class. Please see below for a working example.

Please note your linear gradient declaration should also be written like below without the hyphen in to-right:

background: linear-gradient(to right, #494964, #6f6f89);

.container p {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
  font: 900 1.2em sans-serif;
}
.background-color {
  background: linear-gradient(60deg, blue, yellow, red, yellow, red);
}
<div class="container">
  <p class="background-color">
    The background is clipped to the foreground text.
  </p>
</div>

Upvotes: 1

Related Questions