Как сделать градиентную обводку у текста?

Рейтинг: 1Ответов: 1Опубликовано: 01.02.2023

Есть такая картинка. Как у текста можно сделать такую градиентную обводку на CSS? введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Пример

body {
  background-color: #D9D9D9;
}

h1 {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f00 0%, #00f 60%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #fff;
  letter-spacing: 3px;
}

h1::selection {
   color: #fff;
   background-color: #00f;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #000;
}
<h1>Забери свой бонус</h1>