How do I solve 'invalid property' issue

Question

I added a gradient background to h3 used below code so to add gradient to the text only.

.locations-head h3 {
  padding: 4rem 0rem;
  background: linear-gradient(#131c27, #663b34);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class = "locations-head">
  <h3> This is a test </h3>
</div>

This is working perfectly fine in firefox but in chrome, it seems background-clip: text; is not working. Developer tools also highlighted this snippet and marked it as invalid property.

Add `-webkit-background-clip: text;` also. – Prakash M May 18 '21 at 10:53 — Prakash M, May 18 '21 at 10:53

score 2 · Answer 1 · answered May 18 '21 at 10:54

According to caniuse.com/?search=background-clip, even latest version of chrome needs
-webkit- browser prefix for background-clip property.

.locations-head h3 {
  padding: 4rem 0rem;
  background: linear-gradient(#131c27, #663b34);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class = "locations-head">
  <h3> This is a test </h3>
</div>

How do I solve 'invalid property' issue

1 Answers1