Is it possible with CSS to make each letter of a word have a different color?

Asked

Viewed 337 times

-1

.two-colors{
   font-size: 160px;
   background: linear-gradient(to right, blue 50%, green 0);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 
  font-weight: 900;
  font-family: Arial;
  
}



<span class="two-colors">TESTE </span>

</body>
</html>
<span class="two-colors">TESTE </span>

html css html5 css3 html-select

  • If you have control over the source the gradient itself works, just missed to hit the percentages (is a chipped gambiarra, but it is only you do for example blue 20%, green 20%, green 40%, red 40%, red 60%, etc (hitting the % for colors)

  • You have to give more details, Pq does not put each letter within a span and arrow a color?

  • I wanted to get an equal result of this image https://http2.mlstatic.com/D_NQ_NP_665890-MLB31127748573_062019-O.jpg. I almost got it with the example of my friend @Bacco.

  • 1

    The suggestion to place each letter within a span and set a color is unfeasible if it is a text for example. If it’s a few words, it works perfectly.

  • @douglasabnovato I managed to put the span and setar color in each letter. And also I got with the response of our friend Bacco. But for a text it gets very complicated!

1 answer

6


I consider it "appeal", but just to say that this path that began in the question would be a way:

.two-colors {
   font-size: 160px;
   background: linear-gradient(to right,
      blue 20%,
      green 20%, green 40%,
      red 40%, red 60%,
      orange 60%, orange 80%,
      purple 80%
    );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 
    font-weight: 900;
    font-family: Arial;
}
Dá certo aqui:<br>
<span class="two-colors">TESTE</span><br>
Aqui já precisaria ajustar tudo, mas ai fica errado pro outro texto:<br>
<span class="two-colors">WIDOW</span><br>

Only fatally for fonts with varying width of characters will have to adjust case by case manually and will be full of failures if the user has any source other than the one specified (either by failure in the load or any other restriction).

Summary: save some very bizarre situation, better separate in the same HTML and use, for example, a span per letter to not affect the semantics.

Browser other questions tagged html css html5 css3 html-select

You are not signed in. Login or sign up in order to post.