Нужно задать тексту градиент

Question

.one{
  background: linear-gradient(to right, #1f4ea2 0%, #36a9e1 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
}

 <div class="one">Example text</div>

Нужны разные методы для создания линейного градиента для текста, так как с данным методом некорректно отображается в режиме печати (ctrl + P в браузере) появляются артефакты - тонкие линии

Answer 1

Нет возможности проверить на принтере, поэтому только, как вариант - реализация с помощью параметра наложения:

.one {
  position: relative;
  font-size: 100px;
  background: white;
  color: #808080;
}

.one::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  mix-blend-mode: overlay;
  background: linear-gradient(to right, #1f4ea2 0%, #36a9e1 60%);
}

<div class="one">Example text</div>

БЛОГ НА HUSL

Нужно задать тексту градиент

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