Gradiente de texto

Hoje em dia você pode ver truques legais como gradiente de texto em muitos lugares... mas? Você já se perguntou como eles são feitos? Deixe-me ensinar você hoje.

.text-gradient {
  background: linear-gradient(-25deg, #5662f6 0%, #7fffd4 100%);
  color: transparent;
  background-clip: text;
}

Veja aqui primeiro, demos um gradiente ao fundo do texto. Em seguida, tornaremos a cor do texto TRANSPARENTE para que não fique visível.
Depois disso usaremos a propriedade background-clip para fazer o texto de forma que a cor do fundo seja alterada para a cor do texto.

Se você quiser conhecer mais 4 truques desse tipo, clique na imagem abaixo?