How do I solve 'invalid property' issue [duplicate]

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

gradient text

.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.