Como criar textos com gradiente e imagem com CSS

Um efeito muito usado em programas de edição de imagem e vetorização é adicionar imagem dentro de textos ou objetos. Hoje vamos mostrar como fazer esse efeito para web usando apenas CSS.

O CSS foi evoluindo muito nos últimos anos, e foram acrescentadas muitas propriedades que ajudam muito no desenvolvimento e no design dos elementos de um site, porém algumas são pouco conhecidas, nosso trabalho aqui é apresentar algumas dessas propriedades.

Nesse artigo vamos falar do background-clip. A propriedade CSS define se o fundo de um elemento se estende abaixo de sua caixa de borda, caixa de preenchimento ou caixa de conteúdo. Neste artigo vamos usar ele para adicionar um fundo dentro de um texto.

Veja em vídeo como fazer:

Agora vamos fazer o passo a passo de como fazer, primeiro vamos criar o texto que queremos adicionar o fundo, o primeiro vamos fazer com um gradiente.

<h1 class="gradient"><span class="ez-toc-section" id="texto_com_gradiente"></span>texto com gradiente<span class="ez-toc-section-end"></span></h1>

Agora vamos estilizar nosso texto com CSS.

.gradient {
  font-size: 6em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  /* fundo gradiente */
  background-image: linear-gradient(#001fff, #8406d6);
  /* agora colocamos o fundo gradiente dentro do texto com essa propriedade */
  background-clip: text;
  -webkit-background-clip: text;
  /* a cor do texto deve estar como transparent */
  color: transparent;
}

Nosso efeito está criado, para adicionar uma imagem de fundo é o mesmo passo, basta alterar o background-image e adicionar uma imagem de fundo assim como no exemplo abaixo:

.gradient {
  font-size: 6em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  /* imagem de fundo */
  background-image: url('https://i.ibb.co/Sdq57NK/wallup-net.jpg');
  /* agora colocamos o fundo gradiente dentro do texto com essa propriedade */
  background-clip: text;
  -webkit-background-clip: text;
  
  /* a cor do texto deve estar como transparent */
  color: transparent;
}

Veja como ficou nosso exemplo criado:

See the Pen CSS Gradient Text by Cupcom Codes (@cupcomcodes) on CodePen.

O legal é que você pode adicionar efeitos de transição e animações com css em seu fundo, basta usar a ciratividade.

Espero ter ajudado 🙂