Aplicar cor em metade de cada letra apenas com CSS

Aplicar cor em metade de cada letra apenas com CSS

Hoje me deparei com uma pergunta interessante e fui atrás de encontrar da internet uma possível solução.

É possível aplicar duas ou mais cores em cada letra de uma frase usando apenas  CSS?

E a resposta é sim! Encontrei uma solução bem simples por sinal, tanto para dividir as cores da letra na horizontal quanto na vertical. E o melhor de tudo, usando apenas CSS!!

Tanto para dividir verticalmente quanto horizontalmente utilizaremos a mesma ideia, que consiste em:

  • Aplicar display inline-block para o elemento poder ser preenchido e ficar lado a lado um do outro
  • Criar um background degradê em cada elemento e aplicar ele no texto usando a propriedade background-clip
  • Deixar a cor do texto como transparent

Aplicando 2 cores em uma letra na horizontal com CSS

Para aplicar horizontalmente podemos dar um gradiente com direção para baixo. Esse estilo deverá ser aplicado em cada linha do texto.

h1 span {
	display: inline-block;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(to bottom, #1abc9c 50%,#3498db 50%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
<h1><span>webTutorial</span></h1>

Aplicando 2 cores em uma letra na vertical com CSS

Para aplicar verticalmente vamos mudar a direção do gradiente para a direita. Diferente do método anterior aqui temos que aplicar em cada letra. 😢

h1 span {
	display: inline-block;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(to right, #1abc9c 50%,#3498db 50%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	padding:0;
}
<h1><span>w</span><span>e</span><span>b</span><span>T</span><span>u</span><span>t</span><span>o</span><span>r</span><span>i</span><span>a</span><span>l</span></h1>

Com certeza esse não é o jeito "mais bonito" de se fazer, mas é uma alternativa utilizando CSS puro. 😊

Existem também algumas bibliotecas em JavaScript bem mais completas e eficientes, como por exemplo a lettering.js.

Referências