Is there a text-fill property in CSS?

Question

Gradient text with shadow is overcomplicated

h1 {
  -webkit-text-fill-color: transparent; /* Move to h1::before = tiny black border. Remove = black text. */
  position: relative; /* Remove = h1::before overflows to padding of h1's container if text is wrapped. */
  text-shadow: 0 0 3px red; /* Move to h1::before = red text (!), blue-lime inset shadow (!), red shadow. */
  /* filter: drop-shadow(0 0 10px red); Multiple values are applied on each other, instead of the text. */
}

h1::before {
  background: linear-gradient(blue, lime);
  -webkit-background-clip: text; /* Works, because -webkit-text-fill-color is inherited from h1. */
  content: attr(data-text); /* Remove = no h1::before = no gradient. */
  position: absolute; /* Remove = separated shadow. */
  text-shadow: none; /* Remove = red text (!), blue-lime inset shadow (!), red shadow. */
}

<!-- The data-text attribute is for h1::before {content: attr(data-text);} -->
<h1 data-text="Gradient text with shadow">Gradient text with shadow</h1>

Is there a text-fill property in CSS?

h1 {
  text-fill: linear-gradient(blue, lime);
  text-shadow: 0 0 3px red;
}

<h1>Gradient text with shadow</h1>

• If yes...
  • How is it called? (text-fill is unknown property name in Chrome.)
  • Which CSS specification (draft) is it - or will be - part of?
• If no...
  • How can it be requested?
  • Would it be useful (pro/con)?

-webkit-text-fill-color is not enough

It can't be used with gradients, just colors. It's like background-color, but I'm looking for something like background, which is a shorthand and accepts not only colors, but gradients as well. The text-fill I'm looking for might be the shorthand for things like text-fill-attachment, text-fill-clip, text-fill-color, text-fill-image, text-fill-origin, text-fill-position, text-fill-repeat, text-fill-size, I guess. Or at least text-fill-gradient.

Answer 1

Not a direct answer to your question but a different idea of code to show that it's not complex or overcomplicated to get a shadow with gradient text

h1 {
  display: grid;
}

h1::before,
h1::after {
  content: attr(data-text);
  grid-area: 1 /1;
  color:transparent;
}

/* the gradient */
h1::after {
  background: linear-gradient(blue, lime);
  -webkit-background-clip: text;
}
/* the shadow */
h1::before {
  text-shadow: 0 0 3px red;
}

<h1 data-text="Gradient text with shadow"></h1>

And in the near future you can optimize like below (working only on Firefox for now)

h1 {
  display: grid;
}

h1::before,
h1::after {
  content: attr(data-text);
  grid-area: 1 /1;
  color:transparent;
}

/* the gradient */
h1::after {
  background: linear-gradient(blue, lime) text;
}
/* the shadow */
h1::before {
  text-shadow: 0 0 3px red;
}

<h1 data-text="Gradient text with shadow"></h1>

You have your one line to create a text with gradient coloration.

Answer 2

there's a text-fill-color property in CSS, it is used with -WebKit- extension.