HTML text with gradient

Viewed 39

So, I play a game (LoR) where you can edit your deck names with HTML code and I have absolutely 0 experience with HTML. The thing is, I saw some people with gradient deck names and Idk how they did that. here's an exemple. The problem is that the deck name has a maximum of 50 character to use, so doing it manually is impossible (changing the color of every single letter) like this:

<color="red"> E <color="######"> X <color="blue"> A <color="######"> M <color="xxxxxx"> P <color="yyyyyy"> L <color="zzzzzz"> E

There was a tool that did that (this one) but from what I searched the guy who did it vanished 2 years ago.

Anyone here has an idea on how to make that?

1 Answers

I have done an example for you, you can define various types of webkit gradient( Radial or Linear) https://webkit.org/blog/1424/css3-gradients/

h1 {
  font-size: 72px;
  background: -webkit-radial-gradient(red, green, blue, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<body>
<h1> EXAMPLE </h1>
</body>

Related