Is there a text-fill property in CSS?

user_1293492 0
Viewed 3256

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.

specifications css
2 Answers

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.

user_86203330

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

user_100088580
Related