How can i fix css gradient?

Question

can someone tell me why my gradient text css didn't work ? i try to change color text to gradient but the color text still black

.head{
    margin-top: 12rem;
    text-align: center;
    background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
    text-align: center;
    -webkit-background-clip: text;
}

 <h1 class="head">Hallo</h1>

Answer 1

Add -webkit-text-fill-color property to your text

-webkit-text-fill-color: transparent;

.head{
    margin-top: 5rem;
    text-align: center;
    background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<h1 class="head">Hallo</h1>