using background-clip: text property with an absolute element

Question

Here I have a clipped text that has a gradient color

<div className="gradient"
   <p className="text">gradient text</p>
</div>

.gradient {
    width: fit-content;
    height: fit-content;
    position: relative;
    background: linear-gradient(to right, red, blue);
    background-clip: text;
}

/* need this to have position: absolute */
.text {
    font-size: 100px;
    -webkit-text-fill-color: transparent;
}

I need the text to be an absolute element. How can I achieve the same clipping effect with text having position: absolute?