Reputation: 21
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
Reputation: 835
This could also have to do with the fact that background-clip: text
is an experimental feature, according to MDN docs
Upvotes: 1
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