Gradiente em texto: corrigir cor e formato HEX

Para aplicar degradê em texto no Easy Builder, use a classe degrade via CSS e evite os dois erros comuns: falta de padding e cor de texto fixa sobrepondo o gradiente.

Quando acontece

O degradê no texto não aparece, aparece cortado (parte de cima/baixo das letras some), ou é sobreposto por uma cor sólida.

Causa

A chave/tag de degradê pode falhar; falta de padding corta o texto; e uma cor de texto definida no widget ou um estilo global do Elementor tem prioridade sobre o gradiente.

Solução

1. Aplique uma classe (ex.: degrade) ao widget de texto, em 'Avancado' > campo de classe CSS.

2. Adicione um widget HTML no final da página (ou use o CSS Personalizado) com o CSS do gradiente para essa classe:

.degrade {
  background: linear-gradient(90deg, rgba(166,207,0,1), rgba(81,31,250,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.15em;
}

O que faz: cria o degradê e "recorta" ele no formato das letras, deixando a cor aparecer só no texto. O color: transparent é o que revela o gradiente; o padding-bottom evita que as letras fiquem cortadas em cima/embaixo.

Como usar: cole no widget HTML (ou no CSS Personalizado da página). Troque as duas cores do linear-gradient pelas que você quer — pode usar HEX (#a6cf00) ou RGBA (rgba(166,207,0,1)), tanto faz. A classe degrade tem que ser a mesma que você colocou no widget de texto (passo 1).

3. Escolha as cores do gradiente livremente — HEX ou RGBA funcionam (ex.: #a6cf00 ou rgba(166,207,0,1)).

4. Se o texto estiver sendo cortado, adicione padding-bottom: 0.15em; à classe .degrade.

5. Se a cor sólida estiver vencendo o gradiente, remova a cor de texto definida no widget (aba Estilo) ou torne o CSS do gradiente mais específico.

6. Se preferir, gere o código do gradiente com o Easy Coder ou com um gerador de gradiente CSS.