W3docs
pt
Entrar

Propriedade CSS text-fill-color

Use a propriedade CSS text-fill-color para definir a cor de preenchimento do texto. Veja os valores da propriedade e pratique com exemplos.

A propriedade -webkit-text-fill-color especifica a cor de preenchimento dos caracteres no texto — a cor pintada por dentro de cada glifo.

Esta página explica o que a propriedade faz, como ela difere da propriedade color comum, por que quase sempre é combinada com background-clip: text para criar texto em gradiente e quais ressalvas de suporte a navegadores devem ser levadas em conta.

Como ela se relaciona com a propriedade color

Por si só, -webkit-text-fill-color faz o mesmo trabalho que color: define o preenchimento do texto. Se você não definir -webkit-text-fill-color, o valor da propriedade color será usado em seu lugar.

A diferença aparece quando ambas estão presentes ou quando background-clip: text está em uso. -webkit-text-fill-color sempre prevalece sobre color para o preenchimento, que é exatamente o motivo pelo qual ela é usada para substituir color quando um plano de fundo é recortado para o texto:

p {
  color: #444;                       /* fallback if text-fill-color is unsupported */
  -webkit-text-fill-color: #1c87c9;  /* takes priority for the fill */
}

Criando texto em gradiente

O motivo mais comum para usar essa propriedade é o texto em gradiente. A receita é:

  1. Coloque um gradiente (ou qualquer imagem) no background do elemento.
  2. Recorte esse plano de fundo no formato do texto com -webkit-background-clip: text e background-clip: text.
  3. Defina -webkit-text-fill-color: transparent para que o preenchimento sólido fique transparente e o plano de fundo recortado apareça através dos glifos.

Sem o passo 3, o preenchimento opaco cobriria o plano de fundo e o gradiente nunca ficaria visível. Consulte gradientes CSS para a sintaxe de gradiente e background-clip para entender como o recorte de texto funciona.

Informação

A propriedade -webkit-text-fill-color é usada principalmente junto com -webkit-background-clip: text para criar efeitos de texto em gradiente. Observação: o Safari suporta background-clip: text, mas não suporta a propriedade padrão text-fill-color. Use -webkit-text-fill-color para compatibilidade entre navegadores.

Perigo

A propriedade text-fill-color não é totalmente padronizada em todos os navegadores. Não dependa dela em sites de produção sem fallbacks, pois não funcionará para todos os usuários. Os detalhes de implementação podem variar e o comportamento pode mudar no futuro.

Valor InicialcurrentColor
Aplica-se aTodos os elementos.
HerdadaSim.
AnimávelSim. A cor é animável.
VersãoCompatibility Standard
Sintaxe DOMobject.style.textFillColor = "#1c87c9";

Sintaxe

Valores do CSS -webkit-text-fill-color

-webkit-text-fill-color: color | initial | inherit;

Exemplos

Preenchimento de texto sólido

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
        font-size: 1.5em;
        -webkit-text-fill-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-fill-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Experimente Você Mesmo »

Resultado

text-fill-color com valor transparent

Um gradiente vertical com o valor "transparent"

Isso define o preenchimento como transparent e recorta um linear-gradient vertical no texto do título:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        padding: 10px;
        margin: 15px auto;
        font-size: 18px;
      }
      p {
        color: #444;
        line-height: 1.6;
        margin: 20px 0;
        background: #E7E7E2;
      }
      q {
        display: block;
        margin: 25px 0;
        text-transform: uppercase;
        text-align: center;
        font-family: sans-serif;
        font-size: 30px;
        color: #8e2b88;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(to bottom, #ff0052, #8e2b88);
        -webkit-background-clip: text;
        background-clip: text;
      }
      q:before {
        content: '';
      }
    </style>
  </head>
  <body>
    <article>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
      </p>
      <q>
        The text-fill-color property is used with -webkit- extension.
      </q>
      <p>
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
      </p>
    </article>
  </body>
</html>
Experimente Você Mesmo »

Um gradiente horizontal com múltiplos pontos de parada

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        display: inline-block;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 40pt;
        background: linear-gradient(to right, rgb(25, 76, 192), rgb(196, 26, 3) 20%, rgb(236, 190, 6) 40%, rgb(25, 76, 192) 60%, rgb(3, 116, 8) 80%, rgb(196, 26, 3));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>Cascading Style Sheets (CSS)</h1>
  </body>
</html>
Experimente Você Mesmo »

Valores

ValorDescrição
colorEspecifica a cor de preenchimento do conteúdo de texto do elemento. Nomes de cores, códigos de cor hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados.
initialFaz a propriedade usar seu valor padrão.
inheritHerda a propriedade do elemento pai.

Suporte a navegadores e fallbacks

-webkit-text-fill-color faz parte do WHATWG Compatibility Standard em vez de uma especificação CSS principal, portanto depende do prefixo -webkit- em todos os navegadores, incluindo os que não são WebKit, como o Firefox. Por não ser uma propriedade totalmente padronizada, sempre forneça um fallback:

  • Defina a propriedade color comum com uma cor sólida utilizável. Navegadores que ignoram -webkit-text-fill-color recorrem a color, mantendo o texto legível.
  • Evite -webkit-text-fill-color: transparent sem um plano de fundo recortado — se background-clip: text não for suportado, o texto ficará invisível. Combine transparent com um fallback de color ou use detecção de recursos com @supports (background-clip: text) or (-webkit-background-clip: text).

Propriedades relacionadas

  • color — a forma padrão de definir a cor do texto e o fallback para esta propriedade.
  • background-clip — recorta o plano de fundo no formato do texto para que um gradiente possa aparecer através dele.
  • Gradientes CSS — os gradientes usados nos exemplos acima.
  • text-stroke — adiciona um contorno ao redor dos glifos, frequentemente combinado com uma cor de preenchimento.
  • Nomes de cores CSS — as cores nomeadas que podem ser passadas como valor.

Prática

Prática
O que você pode dizer sobre a propriedade CSS 'text-fill-color' de acordo com as informações fornecidas na página?
O que você pode dizer sobre a propriedade CSS 'text-fill-color' de acordo com as informações fornecidas na página?
Was this page helpful?