Заливка текста градиентом или изображением

Эффектный текст с фоновым градиентом или изображением

Пример на Codepen

Подписаться на Telegram-канал блога

HTML-разметка примера

<div class="text-fill">
  <div class="container">
    <div class="text-fill__text text-fill__text_a">Text fill A</div>
    <div class="text-fill__text text-fill__text_b">Text fill B</div>
    <div class="text-fill__text text-fill__text_c">Text fill C</div>
    <div class="text-fill__text text-fill__text_d">Text fill D</div>
    <div class="text-fill__text text-fill__text_e">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nesciunt, nemo provident quibusdam fugit, ullam nulla iusto quae inventore laboriosam, aliquid culpa veniam, ipsum a hic. Sed, sequi accusantium praesentium aspernatur, similique soluta quibusdam cupiditate quia a odit commodi dicta corporis, atque aliquam velit ad eaque et! Porro, nulla quasi!</div>
  </div>
</div>

CSS стили примера

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
.text-fill {
  padding: 60px 0;
}
.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_a {
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
}
.text-fill__text_b {
  background-image: url("https://picsum.photos/id/162/1920/1080");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.text-fill__text_c {
  background-image: linear-gradient(109.6deg, #2119b4 11.2%, #fd1d1d 55.2%, #fcb045 91.1%);
}
.text-fill__text_d {
  background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
}
.text-fill__text_e {
  font-size: 18px;
  background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
  max-width: 600px;
  margin: 0 auto;
}
/* Internet Explorer не поддерживает свойства `background-clip: text` и `-webkit-text-fill-color` поэтому блоку `.text-fill__text` задаем свойства, которые будут применены только для Internet Explorer */
@media all and (-ms-high-contrast: none) {
  .text-fill__text {
    color: #333;
    background: none;
  }
}

Как работает заливка текста

1. Блоку с текстом задаем фон - это может быть как градиент, так и изображение
2. Задаем свойство -webkit-background-clip: text; - обрезает фон за пределами текста
3. Задаем свойство -webkit-text-fill-color: transparent; - делает текст прозрачным, чтобы был виден фон

.text-fill__text {
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Примеры заливок

Text fill A

<div class="text-fill__text text-fill__text_a">Text fill A</div>

.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_a {
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
}

Text fill B

<div class="text-fill__text text-fill__text_b">Text fill B</div>

.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_b {
  background-image: url("https://picsum.photos/id/162/1920/1080");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

Text fill C

<div class="text-fill__text text-fill__text_c">Text fill C</div>

.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_c {
  background-image: linear-gradient(109.6deg, #2119b4 11.2%, #fd1d1d 55.2%, #fcb045 91.1%);
}

Text fill D

<div class="text-fill__text text-fill__text_d">Text fill D</div>

.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_d {
  background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
}

Text fill E

<div class="text-fill__text text-fill__text_e">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nesciunt, nemo provident quibusdam fugit, ullam nulla iusto quae inventore laboriosam, aliquid culpa veniam, ipsum a hic. Sed, sequi accusantium praesentium aspernatur, similique soluta quibusdam cupiditate quia a odit commodi dicta corporis, atque aliquam velit ad eaque et! Porro, nulla quasi!</div>

.text-fill__text {
  font-size: 100px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-fill__text_e {
  font-size: 18px;
  background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
  max-width: 600px;
  margin: 0 auto;
}

Работает во всех современных браузерах, кроме Internet Explorer, так что можно применять в проектах, а для Internet Explorer задать отдельные стили

Internet Explorer не поддерживает свойства background-clip: text и -webkit-text-fill-color поэтому блоку .text-fill__text задаем свойства, которые будут применены только для Internet Explorer

@media all and (-ms-high-contrast: none) {
  .text-fill__text {
    color: #333;
    background: none;
  }
}

Чуть подробнее - CSS только для Internet Explorer 10+

Основа эффекта взята здесь - CSS Gradient Text

Ссылка на документацию по background-clip - MDN web docs

Ссылка на документацию по -webkit-text-fill-color - MDN web docs

Ссылка на документацию по linear-gradient() - MDN web docs

Ссылка на документацию по radial-gradient() - MDN web docs

Изображения - https://picsum.photos/

Поддержать