Контур с заливкой

Контурные буквы (text-stroke) заливаются цветом снизу вверх по ховеру.

Наведите на каждую строку.

НАВЕДИ

НА КАЖДУЮ

СТРОКУ

Код

<h1 class="stroke-fill">ЗАГОЛОВОК</h1>

<style>
.stroke-fill {
  color: transparent;                       /* только контур */
  -webkit-text-stroke: 1.5px #e9ecf1;
  background: linear-gradient(#E84B16, #E84B16) no-repeat 0 100%;
  background-size: 100% 0;                  /* заливка спрятана */
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size .5s cubic-bezier(.16,1,.3,1);
}
.stroke-fill:hover {
  background-size: 100% 100%;               /* заливка поднимается */
  -webkit-text-stroke: 1.5px #E84B16;
}
</style>

Промпт для ИИ

Сделай контурный текст с заливкой по ховеру: color transparent + -webkit-text-stroke 1.5px для контура; заливка — background linear-gradient одного цвета c background-clip:text, спрятанная через background-size 100% 0 (позиция 0 100%, чтобы росла снизу); на :hover background-size 100% 100% с transition 0.5s cubic-bezier(0.16,1,0.3,1). Работает и от скролла, если менять background-size от прогресса.