Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Não funciona -webkit-backgroung-clip: text

Referente ao curso HTML e CSS: responsividade com mobile-first

por Shirley Regina Roque
| 59.8k xp | 45 posts
Enfermeira 

.lista-menu__link {
    color: var(--blue-gradient);
    -webkit-background-clip: text; /* Para o gradiente ficar dentro do texto */
    /*-webkit-text-fill-color: transparent; /* Para o texto ficar transparente */
    background-clip: text; /* Para o gradiente ficar dentro do texto */
    font-family: var(--font-family);
    font-size: var(font-size-subtitle);
    font-weight: var(--font-weight-text);
    text-decoration: none;

Ao inspecionar o arquivo mostra que o trecho não está sendo utilizado, se eu coloco o trecho comentado "some" a lista, do restante tudo funciona, só não carrega a cor. Como posso resolver, uso o chrome e Edge.

1 resposta
por Rafaela Petelin Silvério
| 727.4k xp | 1628 posts
Alura Scuba Team Monitora de Fórum

Oi, Shirley! Como vai?

Peço desculpas pela demora em obter um retorno.

Primeiro é necessário descomentar o -webkit-text-fill-color: transparent; que está comentado. Essa propriedade é essencial para que o efeito de gradiente funcione no texto. Sem ela, o navegador não aplicará o gradiente corretamente.

Como resolver:

Basta remover o comentário e garantir que a propriedade -webkit-text-fill-color esteja ativa:


.lista-menu__link {
    color: var(--blue-gradient);
    -webkit-background-clip: text; /* Aplica o gradiente dentro do texto */
    -webkit-text-fill-color: transparent; /* Deixa o texto transparente */
    background-clip: text; /* Padrão para compatibilidade */
    font-family: var(--font-family);
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-text);
    text-decoration: none;
}

Isso deve garantir que o gradiente funcione corretamente no Chrome e no Edge. Se o problema persistir, confira se a variável --blue-gradient está bem definida no seu CSS, assim:


:root {
    --blue-gradient: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
}

Caso ainda não funcione, tente forçar a aplicação do background-clip com -webkit e background: var(--blue-gradient);:


.lista-menu__link {
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓