I’m currently developing a React webpage that utilizes a WebGL canvas for its background. I’ve been attempting to add a gradient effect to some text, but I’m unable to achieve the desired result. The text content and all the other components like on top of the canva with position:absolute

//App.js   
<canvas ref={canvasRef} style={{ width: '100vw', height: '100vh', zIndex: "-1", position:"absolute" }} />
   <Navbar/>
   <Hero/>




//Hero.jsx
import React from 'react'

function Hero() {
  return (
    <div className='flex justify-center items-center gap-10 relative'>
        <div className='flex flex-col justify-center items-center text-2xl w-48 gap-4 relative'>
            <span className='gradient-color'>
            <p className='capitalize text-balance leading-[2.2rem]'>Transform your Website</p>
            </span>
            <p className='capitalize text-white'>With Motion Art Effect</p>
        </div>
    </div>
  )
}

export default Hero

//style.css
.gradient-color{
  position: absolute;
  z-index: 10;
  background:  linear-gradient(90deg, #F87516 0%, #5E11FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-color: transparent;
  background-image: linear-gradient(90deg, #F87516 16%, #5E11FF 43%);
}