How to apply a Gradient to Text in CSS
Use the background, -webkit-background-clip and -webkit-text-fill-color CSS properties. Open Source code included.
We recommend that you clone our Open Source React-Redux Starter Project, checking out the main branch and apply the code found below to the App.tsx file. The changes can be found on the tutorial/typography/gradient branch.
git clone git@github.com:delasign/react-redux-starter-project.git
The code below creates an equally spaced gradient from left to right based on the hex colors defined in line 33.
The CSS properties that create this gradient are defined on lines 26 to 28.
For more information about the linear gradient and other gradient options consult the link below.
Looking to learn more about ReactJS and CSS ?
Search our blog to find educational content on learning how to use ReactJS and CSS.