Как создать заливку текста градиентом с помощью CSS

SebWeo.com

Веб-дизайнеры и разработчики всегда ищут что-то новое и креативное, чтобы сделать свой сайт уникальным и выразительным. Один из таких способов визуально привлечь внимание – использовать градиентный текст. Градиентный текст – просто текст, к которому применена заливка градиентом, и с помощью этого цветового эффекта получает уникальный и привлекательный вид.

В данном практическом уроке я покажу вам разные методы, позволяющие наложить градиент на текст: через несколько простых свойств CSS или через SVG.

Градиентный текст с помощью только CSS

Язык стилей CSS – это мощный инструмент, умеющий создавать эффект градиентного текста. Например, с использованием функции linear-gradient(), когда требуется создать линейный градиент, или функции radial-gradient() – когда требуется радиальный градиент. Эти функции можно применить к тексту с помощью свойства background-clip. Ниже показан простой пример того, как создать линейный градиент для текста с помощью CSS:

.text-with-gradient {
  background: linear-gradient(135deg, #5e58ff, #f9ff58);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Сначала через свойство background-image применяем функцию linear-gradient() с углом наклона, начальным и завершающим цветом градиента. Затем устанавливаем свойство background-clip (ограничение, обрезка фона) для текста и прозрачность (transparent) для свойства -webkit-text-fill-color (заполнение текста цветом). С помощью этой инструкции мы указываем браузеру применить градиент только к тексту и сделать цвет текста прозрачным, чтобы градиент был виден. Я уже использовал свойство CSS-отсечения (background-clip), чтобы создавать круглые изображения, и, как видите, оно пригодилось и для текущей задачи.

Градиентный текст с помощью свойства `mask-image`

Еще мы можем создать градиентный текст, используя свойство mask-image. Например, используя прозрачное изображение PNG в качестве маски изображения, к которой затем будет применен градиент.

.text-with-gradient {
  background-image: linear-gradient(135deg, #feac5e, #c779d0, #4bc0c8);
  mask-image: url("logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  color: transparent;
}

Здесь логика практически аналогична предыдущему подходу, но вместо текста мы используем изображение, содержащее нужный текст. Следует отметить, что мы можем использовать не только текст, но, например, какие-то сложные фигуры.

Использование `mix-blend-mode` для создания градиентного текста

Свойство CSS mix-blend-mode позволяет указать, как содержимое элемента должно сочетаться с фоном. Это может быть особенно полезно при создании градиентного текста, так как позволяет сочетать цвет текста с градиентным фоном.

Чтобы использовать mix-blend-mode для создания градиентного текста, сначала нужно установить цвет фона в качестве градиента, используя один из методов, рассмотренных ранее в данном уроке. Затем можно добавить свойство mix-blend-mode для текстового элемента и установить для него режим смешивания, хорошо работающий с градиентным фоном (например, luminosity).

Вот пример того, как использовать mix-blend-mode для создания градиентного текста. Разметка следующая:

<div class="background-with-gradient">
  <p class="text-with-gradient">SebWeo</p>
</div>

CSS стили:

.background-with-gradient {
  background-image: linear-gradient(135deg, #feac5e, #c779d0, #4bc0c8);
}
.text-with-gradient {
  position: relative;
  mix-blend-mode: luminosity;
  background: white;
  color: gray;
}

В этом примере я для родительского блока установил линейный градиент с помощью свойства background-image. Затем для элемента p с классом text-with-gradient установил свойство mix-blend-mode в luminosity (режим свечения). В этом режиме смешивание цветов слоя опирается на базовый (серый) и фоновый (белый для текстового элемента). Как видно на картинке – цвет фона смешивается с фоновым цветом текста и мы получаем градиентный текст.

В чем преимущество использования mix-blend-mode? Наибольшее преимущество – это то, что это чистое CSS-решение. Нет необходимости использовать JavaScript или SVG, только несколько строк CSS. Другим преимуществом является то, что mix-blend-mode обеспечивает значительную гибкость типов градиентов и цветов, которые можно использовать и комбинировать.

Градиентный текст с использованием SVG

SVG (масштабированная векторная графика) – это формат векторных изображений на основе XML, поддерживаемый всеми современными веб-браузерами. SVG позволяет создавать сложные фигуры, узоры и градиенты, включая текст с градиентом.

Для создания градиентного текста в SVG можно использовать элемент <text>, который используется для определения текстового фрагмента. Чтобы добавить градиент для заливки текста, можно использовать элемент <linearGradient> (как в нашем примере) или <radialGradient>. Вот как может выглядеть текст с градиентом через SVG.

<svg viewBox="0 0 150 50" xmlns="//www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0, 7, 249);stop-opacity:1"></stop>
      <stop offset="50%" style="stop-color:rgb(255, 255, 0);stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:rgb(79, 82, 194);stop-opacity:1"></stop>
    </linearGradient>
  </defs>
  <text x="50%" y="50%" text-anchor="middle" fill="url(#gradient)">SebWeo</text>
</svg>

В коде SVG картинки данного примера я использую линейный градиент (<linearGradient>) с тремя точками останова (<stop>), которые определяют цвета и положения градиента. Атрибут id используется для идентификации градиента, на который мы можем ссылаться с помощью атрибута fill элемента <text>. Атрибут text-anchor используется для горизонтального центрирования текста, а атрибуты x и y используются для вертикального центрирования текста.

Для создания радиального градиента (<radialGradient>) укажите атрибуты cx, cy и r, которые определяют центр и радиус градиента, например:

<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  …
</radialGradient>

Вас также никто не ограничивает использовать градиенты в SVG в сочетании с другими элементами (такими как фигуры и изображения) для создания действительно сложных дизайнов.

Вместо вывода

Эффективно используя градиентный текст, вы можете вывести дизайн своего веб-сайта на новый уровень и создать незабываемый UX для посетителей. С его помощью можно создать уникальный и привлекательный элемент дизайна для своего сайта. Независимо от того, выберете ли вы простые свойства CSS, SVG или их комбинацию, градиентный текст может визуально украсить вашу страницу.

Но важно помнить, что, хотя текст «покрытый» градиентом может быть мощным инструментом, его следует использовать стратегически и умеренно. Слишком много градиентного текста может привести к перегрузке и отвлечению от общего дизайна страницы. Учитывайте конкретные потребности и цели вашего сайта и будьте уверены, что это удобно и доступно для пользователей.

Благодаря примерам, приведенным в данном практическом уроке, вы сможете более уверенно экспериментировать с градиентным текстом на собственном сайте.

Спасибо за внимание!