Применение градиента к тексту в холсте WebGL на веб-странице React ⇐ CSS

[Anonymous]

В настоящее время я разрабатываю веб-страницу React, в которой в качестве фона используется холст WebGL. Я пытался добавить эффект градиента к тексту, но не смог добиться желаемого результата. Текстовое содержимое и все остальные компоненты находятся в верхней части холста с позицией:absolute
//App.js




//Hero.jsx
import React from 'react'

function Hero() {
return (



Transform your Website

With Motion Art Effect


)
}

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%);
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... ct-webpage