Как использовать как текст-тень и линейный градиент для текста?

Question

Я пытаюсь использовать их оба, но это не получается ..

h1 {
  font-size: 72px;
  background: linear-gradient(to top, black 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<h1>Heading 1</h1>

Использование только линейного градиента без тени текста:

Использование только тени текста без линейного-градиент:

Использование обоих:

Answer 1

Если у вас есть background: linear-gradient(to top, black 50%, orange 50%);, вы должны заменить его на bottom,,
и где у вас есть 1px 0 black, вы должны избавиться от black.

<style>   
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(bottom, black 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: -1px 0, 0 1px, 1px 0, 0 -1px
}
</style>
<h1>Heading 1</h1>

Изменения:

background: -webkit-linear-gradient(bottom,black 50%, orange 50%); text-shadow: -1px 0black, 0 1pxblack, 1px 0black, 0 -1pxblack `;

Answer 2

Основываясь на этом предыдущем ответе , вот идея, где вам нужно будет продублировать текст:

h1 {
  font-family:sans-serif;
  font-size:60px;
  font-weight: bold;
  position:relative;
  margin:20px;
}
h1::before,
h1::after {
  content:attr(data-text);
}
h1::after {
  color:#fff; /*use white*/
  /*create the stroke around text*/
  text-shadow:
    1px 0  0px #000,
    0 1px 0px #000,
    1px 1px 0px #000,
    -1px 0 0px #000,
    0 -1px 0px #000,
    -1px -1px 0px #000,
    -1px 1px 0px #000,
    1px -1px 0px #000;
  mix-blend-mode: darken; /*everything is more dark than white so we always see the background */
}
h1::before {
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(to bottom,yellow 50%, red 51%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}

<h1 data-text="Heading 1"></h1>