How to create text color gradient

Ask us anything How do I?
1

Hey guys!

I’m struggling to create a text color gradient for text in a collection. When I try to change the color, it changes the background. I tried to use the following CSS:

background: linear-gradient(to right, #FFFFFF, #121315);

This works when I use the style tag with a regular HTML file.

But when I try to put this in the CSS section of the text, it just changes the background not the text color. When I put it in the “Color” section, it says the format is invalid. Any ideas here?

This is all I’m looking to do.

Screenshot 2024-06-30 at 9.10.15 PM

Goes from white to black.

Thanks!

P.S. I also tried the gradient feature, but again that was changing the background not the actual text

2

Unfortunately, this isn’t working how you would expect at the moment. But there is a “hack” that has been described in this post: Color gradient in text and border? - #18 by jptrinh

1 Like
3

I created a video to explain this in a little more detail:

4 Likes
4

Wow. Thank you so much! I have been stuck on this for weeks, and literally tried everything. Your video was very helpful!

1 Like
5

How do you create gradient for border ?

i tried this code and it did not work

.gradient-border {
  border: 10px solid transparent; /* Invisible border to define space for the gradient */
  background: linear-gradient(to right, #3A256F, #55408A, #B160E9, #FFC5EC) 1; /* Gradient border */
  border-radius: 20px; /* Rounded corners */
  padding: 20px; /* Padding inside the div */
  background: white; /* Inner content background */
  color: white; /* Text color */
}

but if we use border-image, it works but border image does not respect radius