Градиент мультилайного текста

Question

Всем доброго времени суток!

При верстке очередного макета появилась необходимость создать линейный градиент текста в нескольких строках. Выглядеть это должно примерно так:

Решение, которым я уже не раз пользовался, заставляет текст в span по мере набора общей ширины без учета переноса строки набирать цвет. В этом случае совсем не учитывается положение букв в документе.

h3 {
    font-family: 'Inter';
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    width: 300px;
 }
h3 span {
        font-weight: 700;
        text-transform: uppercase;
        background: linear-gradient(90deg, #FCB045 36.99%, #FD1D1D 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
}

<html><body><h3>Вместе с <span>бесплатной консультацией</span> мы дарим:</h3></body></html>

Костыль, который позволил мне несколько более изящно от этого отойти, нашелся в применении радиального градиента, однако полного совпадения, конечно, не достичь.

background: radial-gradient(circle, rgb(248, 171, 71) 0%, rgb(254, 72, 72)73%);

Может быть как-то можно под низ всего h3 блока подложить картинку с градиентом, закрыть ее сверху плашкой цвета, совпадающего с цветом основного документа, а цвет тексту задать inherit например?

Answer 1

Странно, что зная правильный ответ, Вы не удосужились его применить. Немного изменил цвета для наглядности:

body {
  background-color: #0e1014;
}
h3 {
  margin: 1em auto;
  width: 480px;
  font: 34px/1.4em "Inter", sans-serif;
  text-align: right;
  background-image: linear-gradient(90deg, #fe4, #a00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #fff;
  text-fill-color: #fff;
}
h3 span {
  font: bold 34px/1.4em "Inter", sans-serif;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

<h3>Вместе с <span>бесплатной консультацией</span> мы дарим:</h3>

БЛОГ НА HUSL

Градиент мультилайного текста

Ответы (1 шт):