W3docs
es
Iniciar sesión

Propiedad CSS text-fill-color

Usa la propiedad CSS text-fill-color para especificar el color de relleno del texto. Consulta los valores y practica con ejemplos.

La propiedad -webkit-text-fill-color especifica el color de relleno de los caracteres del texto — el color pintado dentro de cada glifo.

Esta página explica qué hace la propiedad, cómo se diferencia de la propiedad color estándar, por qué casi siempre se combina con background-clip: text para crear texto con degradado, y qué advertencias de compatibilidad con navegadores hay que tener en cuenta.

Relación con la propiedad color

Por sí sola, -webkit-text-fill-color hace lo mismo que color: establece el relleno del texto. Si no se establece -webkit-text-fill-color, se usa en su lugar el valor de la propiedad color.

La diferencia aparece cuando ambas están presentes, o cuando background-clip: text entra en juego. -webkit-text-fill-color siempre tiene prioridad sobre color para el relleno, que es exactamente la razón por la que se usa para anular color cuando un fondo se recorta al texto:

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

Crear texto con degradado

La razón más común para usar esta propiedad es el texto con degradado. La receta es:

  1. Pon un degradado (o cualquier imagen) en el background del elemento.
  2. Recorta ese fondo a la forma del texto con -webkit-background-clip: text y background-clip: text.
  3. Establece -webkit-text-fill-color: transparent para que el relleno sólido sea transparente y el fondo recortado se vea a través de los glifos.

Sin el paso 3, el relleno opaco cubriría el fondo y nunca verías el degradado. Consulta degradados CSS para la sintaxis de degradados y background-clip para ver cómo funciona el recorte al texto.

Información

La propiedad -webkit-text-fill-color se usa principalmente junto con -webkit-background-clip: text para crear efectos de texto con degradado. Nota: Safari admite background-clip: text pero no admite la propiedad estándar text-fill-color. Usa -webkit-text-fill-color para compatibilidad entre navegadores.

Peligro

La propiedad text-fill-color no está completamente estandarizada en todos los navegadores. No dependas de ella en sitios en producción sin alternativas, ya que no funcionará para todos los usuarios. Los detalles de implementación pueden variar y el comportamiento podría cambiar en el futuro.

Valor inicialcurrentColor
Se aplica aTodos los elementos.
HeredableSí.
AnimableSí. El color es animable.
VersiónCompatibility Standard
Sintaxis DOMobject.style.textFillColor = "#1c87c9";

Sintaxis

Valores de CSS -webkit-text-fill-color

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

Ejemplos

Relleno 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>
Pruébalo tú mismo »

Resultado

text-fill-color con valor transparente

Un degradado vertical con el valor "transparent"

Esto establece el relleno como transparent y recorta un linear-gradient vertical al texto del encabezado:

<!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>
Pruébalo tú mismo »

Un degradado horizontal con múltiples paradas de color

<!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>
Pruébalo tú mismo »

Valores

ValorDescripción
colorEspecifica el color de relleno del primer plano del contenido de texto del elemento. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla().
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Compatibilidad con navegadores y alternativas

-webkit-text-fill-color forma parte del WHATWG Compatibility Standard y no de una especificación CSS central, por lo que requiere el prefijo -webkit- en todos los navegadores, incluidos los que no son WebKit como Firefox. Al no ser una propiedad completamente estandarizada, siempre proporciona una alternativa:

  • Establece la propiedad color estándar con un color sólido utilizable. Los navegadores que ignoran -webkit-text-fill-color recurren a color, por lo que el texto sigue siendo legible.
  • Evita -webkit-text-fill-color: transparent sin un fondo recortado — si background-clip: text no está soportado, el texto se vuelve invisible. Combina transparent con una alternativa color, o detecta la característica con @supports (background-clip: text) or (-webkit-background-clip: text).

Propiedades relacionadas

  • color — la forma estándar de establecer el color del texto y la alternativa para esta propiedad.
  • background-clip — recorta el fondo al texto para que un degradado pueda verse a través.
  • Degradados CSS — los degradados utilizados en los ejemplos anteriores.
  • text-stroke — añade un contorno alrededor de los glifos, a menudo combinado con un color de relleno.
  • Nombres de colores CSS — los colores con nombre que se pueden pasar como valor.

Práctica

Práctica
¿Qué puedes decir sobre la propiedad CSS 'text-fill-color' según la información proporcionada en la página?
¿Qué puedes decir sobre la propiedad CSS 'text-fill-color' según la información proporcionada en la página?
Was this page helpful?