Author: Richard Haines

Posted: 07 Apr 2020

take me there

How to add a linear gradient background to text.

I was looking to add the Harry Potter Hogwarts houses colours to each of the houses names on mouse hover. The solution was surprisingly simple, after a little googling.

Linear gradient text

1.gradientText {
2background-image: linear-gradient(
3 90deg,
4 rgba(127, 9, 9, 1) 0%,
5 rgba(255, 197, 0, 1) 12%,
6 rgba(238, 225, 23, 1) 24%
7 );
8background-size: 100%;
9background-repeat: repeat;
10-webkit-background-clip: text;
11-webkit-text-fill-color: transparent;
1function GradientText() {
2 return <p className="styles.gradientText">Check out my beautiful colours!</p>;
3}

Check out my beautiful colours!

Note that styled components cant handle/don't have access to -webkit-text-fill-color. (please shoot me a message if im wrong about this). We can of course use any styled library to do the same thing by creating a styled component and using that instead of the p element.
1const Text = styled.p`
2 background-image: linear-gradient(
3 90deg,
4 rgba(127, 9, 9, 1) 0%,
5 rgba(255, 197, 0, 1) 12%,
6 rgba(238, 225, 23, 1) 24%,
7 rgba(13, 98, 23, 1) 48%,
8 rgba(0, 10, 144, 1) 72%
9 );
10 background-size: 100%;
11 background-repeat: repeat;
12 -webkit-background-clip: text;
13 -webkit-text-fill-color: transparent;
14`;
1function GradientText() {
2 return <Text>Gaze at my beauty......</Text>;
3}

Gaze at my beauty......

Thanks for reading!

Edit on GitHub.Previous: Everyday GIT commandsNext: CSS grid responsive cards