How to Add a Gradient Effect to Text for Eye-Catching Web Design

Hey there 👋! This is Hugo. In today's digital landscape, text styling trends have evolved to include vibrant and eye-catching effects, and one popular choice is gradient text. You may have noticed this modern design choice on websites and SaaS platforms, like Next.js, where gradient effects add a dynamic, polished feel. Adding a gradient to text can give your website an extra edge, enhancing its visual appeal and helping to draw attention to key elements.

In this article, I will take my website-1chooo.com as an example to show you how to create a smooth and customizable linear gradient effect for text on your website. Also, we will share the problem we encountered to achieve this effect and how we solved with ChatGPT. (including the prompt we used, the response we got, and the code we implemented) So, let's dive in!

How to Add a Gradient Effect to Text for Eye-Catching Web Design by Hugo

First, I visit the Next.js official website to get some inspiration. After opening the developer tools (F12), I found that the gradient effect is applied to the text in the hero section.

Linear Gradient Effect in Next.js Site

The gradient effect is a linear gradient from left to right, with a color stop at the middle. The gradient effect is applied to the text by setting background: linear-gradient(180deg, #fff, #adadad); and background-clip: text; properties. Also the text-fill-color property is set to transparent.

Therefore, we just only need to add some CSS code to achieve this effect. Here is the code snippet:

1.info-content .name {
2+  background: linear-gradient(180deg, #fff, #adadad);
3+  background-clip: text;
4+  -webkit-background-clip: text;
5+  -webkit-text-fill-color: transparent;
6}

Then, it works perfectly on my website. Here is the demo:

The Linear Gradient Effect on 1chooo.com

We can see that the gradient effect is applied to my name, Chun-Ho (Hugo) Lin.

However, we encountered a problem when we want to select the text. The selected text is not visible.

The Problem of Selecting Text

So, we asked ChatGPT for help. Here is the prompt we used:

1::selection {
2  background: var(--orange-yellow-crayola);
3  color: var(--smoky-black);
4}

I have the upper style, but if I set the text background in linear-gradient, once I select the text all of the text not showed, it should be yellow background and black text, how do I fix it

1.info-content .name {
2  color: var(--white-2);
3  font-size: var(--fs-3);
4  font-weight: var(--fw-600);
5  letter-spacing: -0.25px;
6  margin-bottom: 10px;
7  background: linear-gradient(180deg, #fff, #adadad);
8  background-clip: text;
9  -webkit-background-clip: text;
10  -webkit-text-fill-color: transparent;
11}

Then, we got the response from ChatGPT:

To achieve the desired selection styling on text with a gradient background, we can add a workaround since the linear gradient with background-clip: text does not play well with ::selection. Here are two options to make sure the text is readable with the selected background and color:

Solution 1: Apply a Transparent Gradient Overlay

You can add a transparent text fill color on selection, which allows the ::selection background and text color to apply correctly. Here’s how:

1/* Selection styling */
2::selection {
3  background: var(--orange-yellow-crayola);
4  color: var(--smoky-black);
5}
6
7.info-content .name {
8  color: var(--white-2);
9  font-size: var(--fs-3);
10  font-weight: var(--fw-600);
11  letter-spacing: -0.25px;
12  margin-bottom: 10px;
13  background: linear-gradient(180deg, #fff, #adadad);
14  background-clip: text;
15  -webkit-background-clip: text;
16  -webkit-text-fill-color: transparent;
17}
18
19/* Selection override for .name */
20.info-content .name::selection {
21  -webkit-text-fill-color: var(--smoky-black); /* Applies black color to text */
22  color: var(--smoky-black); /* Fallback for non-WebKit browsers */
23  background: var(--orange-yellow-crayola);
24}

This code snippet overrides the selection for .name and allows you to control the color without affecting the gradient. The -webkit-text-fill-color set to black ensures that selected text is readable.

Solution 2: Use a Separate Shadow for Selection

Another option is to add a subtle text-shadow to simulate the gradient color but still allow a solid color on selection.

1.info-content .name {
2  font-size: var(--fs-3);
3  font-weight: var(--fw-600);
4  letter-spacing: -0.25px;
5  margin-bottom: 10px;
6  color: var(--white-2);
7  background: linear-gradient(180deg, #fff, #adadad);
8  background-clip: text;
9  -webkit-background-clip: text;
10  -webkit-text-fill-color: transparent;
11  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
12}
13
14/* Override selection */
15.info-content .name::selection {
16  background: var(--orange-yellow-crayola);
17  -webkit-text-fill-color: var(--smoky-black);
18  color: var(--smoky-black);
19}

The shadow here will add a bit of color and make the gradient effect visible, while also ensuring readability during text selection.

I chose the first solution to solve this problem. And below is the segment of the code I implemented:

1+ .info-content .name::selection {
2+   -webkit-text-fill-color: var(--smoky-black);
3+   color: var(--smoky-black);
4+   background: var(--orange-yellow-crayola);
5+ }

After implementing the code, the problem was solved. Here is the demo:

Final Result of the Linear Gradient Effect on 1chooo.com

Now, the text is readable when selected. The gradient effect is applied to my name, Chun-Ho (Hugo) Lin, and the text is visible when selected. We value the credits to ChatGPT for helping us solve this problem. If you want to add a gradient effect to text on your website, you can follow the steps above. Hope this article helps you create a smooth and customizable linear gradient effect for text on your website. 🚀 Follow me to catch up the latest tips for developing website!!!