Três Linhas de CSS

GRADIENTE
NO TEXTO

Sem imagens. Sem SVGs. Apenas CSS puro que renderiza perfeito em qualquer tela.

p {
  background-image: linear-gradient(90deg, #FC466B, #3F5EFB)
  
background-clip: text
  
  color: transparent
}
        

CSS Drops • Texto com Degradê 01 / 04

Veja funcionando

TEXTO COM
GRADIENTE

/* O snippet */

p {

  background-image: linear-gradient(90deg,

    #FC466B 0%, #3F5EFB 100%);

  background-clip: text;

  color: transparent;

}

CSS Drops • Texto com Degradê 02 / 04

As 3 etapas

1 / background-image: linear-gradient(...)

Pinta o degradê no
fundo do elemento

2 / background-clip: text

Recorta o degradê para
seguir cada caractere

3 / color: transparent

Deixa o texto transparente
para o degradê aparecer

CSS Drops • Texto com Degradê 03 / 04

3 LINHAS DEGRADÊ NO TEXTO, FEITO!

p {
  background-image:
  linear-gradient(90deg
  #FC466B, #3F5EFB)
  
background-clip: text
  
  color: transparent
}
            

Compartilhe esta dica 04 / 04