If you're ready to dive into live coding, check out this CodeSandBox I've set up for you here: https://codesandbox.io/s/0j99m3m50
Let me explain what's going on:
I have a React component with a state object that contains two properties (users, gradient) with specific values
this.state = {
users: "developer",
gradient: "linear-gradient(120deg, #f093fb 0%, #f5576c 100%)"
};
The goal is to show the user text clipped to a random gradient background using an h1 JSX tag. However, it doesn't seem to be working as expected. Why?
render() {
const gradually = this.state.gradient;
const userGradient = {
background: `${gradually}`,
WebkitBackgroundClip: "text !important",
backgroundClip: "text !important",
color: "transparent"
};
return (
<div>
<h1 style={userGradient} className="text">
{this.state.users}
</h1>
</div>
);
}