1

.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 в браузере) появляются артефакты - тонкие линии

5
  • На css больше нету вариантов
    – user355286
    29 июл 2020 в 5:05
  • Связанный вопрос: ru.stackoverflow.com/q/1158353/178988
    – Qwertiy
    29 июл 2020 в 8:18
  • @Qwertiy Чем проявляется связаность? Здесь есть только связность. Да, в вопросах, есть похожие слова, но здесь они применяются в другом контексте. 9 авг 2020 в 19:29
  • @ВладимирВладимирович, именно из-за разного контекста была отклонена тревога на удаление одного из вопросов как дубликата другого. Тем не менее, весьма возможно, что решение одного вопроса может быть применимо и для другого.
    – Qwertiy
    10 авг 2020 в 8:50
  • Уважаемый @Qwertiy, согласен с вашей точкой зрения, но в данном вопросе просто хочу узнать про различные способы создания текстового градиента ) 16 авг 2020 в 20:24

1 ответ 1

2

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

.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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.