Градиент для текста

gradient-text

Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.

Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.

Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством
-webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Пример 1. Градиентный текст

Градиентный текст

<p class="gradient-text">Градиентный текст</p>
@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}

Пример 2. Полосатый текст

Полосатый текст

<p class="striped-text">Полосатый текст</p>
.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}

Пример 3. Прозрачный текст

Прозрачный текст

<p class="transparent-text">Прозрачный текст</p>
.transparent-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: #2E2F45;
  display: table;
  margin: 20px auto;
  color: white;
  border-radius: 5px;
  mix-blend-mode: multiply;
  padding: 5px 10px;
}

Пример 4. Полосатая тень

Полосатая тень

<p class="striped-shadow">Полосатая тень</p>
.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 5. Тень «горошек»

Тень «горошек»

<p class="shadow-polka-dot">Тень "горошек"</p>
.shadow-polka-dot {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -5px -5px 0px #EF7657;
  background: radial-gradient(#9DA8A9 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 6. Градиентные границы

Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image.
За толщину рамки отвечает свойство border: 1px solid;

Градиентные границы
<div class="gradient-border">Градиентные границы</div>
.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

Пример 7. Градиентные границы и градиентный текст

Градиентные границы и текст
<div class="gradient-all">Градиентные границы и текст</div>
.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}
  • Создание Сайтов

    Вот это вообще супер! Когда-то мечтал о такой возможности. Ну теперь все, мечта сбылась, можно делать суперские заголовки.

    • Да, согласна с вами, интересные эффекты для текста. И очень простое решение для градиентной границы. Раньше это делалось с помощью двух блоков, вложенных один в другой. Один заливали градиентом, а для второго делали отступы и белый фон, а теперь — пара строчек кода.

  • Алексей

    Здравствуйте, не получается добавить border-radius, так как есть border-image-slice: 1;
    можно как-то это решить, чтобы border-radius был, так было бы намного лучше. Заранее благодарен.

    • Здравствуйте. Для закруглённых углов этот способ не подходит. Посмотрите, как это можно решить http://codepen.io/html5book/pen/wzPqrm. В разметку добавляется ещё один элемент span. Родительский блок заливается полностью градиентом, а span — белым цветом (то есть цветом основного фона) и позиционируется на требуемую ширину границы.

      • Алексей

        Здравствуйте Елена, спасибо за ответ. Все работает, но возможно ли применить для разных заголовков, у меня например на странице их десять и они все разные по длине, для 1 заголовка нормально, а для другого, где длина больше, приходится менять ширину, что крайне неудобно, пробовал % задавать, но не работает.
        Сам код:
        .gradient-border {
        width: 300px;
        height: 60px;
        line-height: 54px;
        text-align: center;
        letter-spacing: 0.2em;
        border-radius: 15px;
        background: linear-gradient(20deg, #f92056 38%, #00deff 65%);
        position: relative;
        }
        .gradient-border span {
        position: absolute;
        width: 296px;
        height: 56px;
        background:white;
        top: 2px;
        left: 2px;
        border-radius: 15px;
        }

        Можно как-то решить эту проблему ? Заранее благодарен.

        • Пожалуйста, нестандартные задачи всегда интересны. Посмотрите пример сейчас. Есть только один вариант — левый и правый бордер рисуем цветом, а верхний и нижний — градиентной заливкой. Я поменяла цвета на красный и синий, чтобы было нагляднее.

  • Max_Y

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

    • Можно, но поскольку сам текст прозрачный, то эффект будет не очень.

      • Max_Y

        Через text-shadow, как я удостоверился это наверно не реализовать. При этом тень налаживается поверх текста(градиента), да, как раз из-за того что текст прозрачный.
        Может Вы знаете не обычное решение или меня поправите? Спасибо

        • Поскольку текст прозрачный, а тень текста дублирует его и просто смещается на указанное расстояние, то именно с тенью не получится. Есть еще одно экспериментальное свойство -webkit-text-stroke. Оно делает обводку по контуру символов заданной толщины и цвета. Можете попробовать добавить в первый пример -webkit-text-stroke: 2px rgba(0,0,0,.3); и посмотреть, как оно работает.

  • Freeman4D

    Можно ли градиент текста наложить на ОТЛИЧНЫЙ от него градиент фона?!

    • Можно. Нужно будет задать градиентный фон для контейнера и для текста. Для текста также установить -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      . Эффект работает только в браузерах на webkit движке.

  • Пожалуйста!
    А что вам переживать, что кто-то с IE и прочим хламом не увидит эту красоту? Остальные современные браузеры всё воспроизводят. Для примера посмотрите реализацию http://codepen.io/nazarelen/pen/BzqEwR.
    Вендорные свойства здесь, правда там и устаревшие и современные.

    • Freeman4D

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

  • Skill Shot

    ух,спасибо огромное! долго искал — нашел.

  • Андрей Васькин

    Делаю пример 3 и текст выравнивается по правому краю.
    А по центру не получается не так (style=»text-align: center;») , не просто кодом html ().
    Получается по центру изменить, если только поменять в этом css (display: table;) на (display: block;) но при этом это серое покрытие вокруг текста расползается на всю ширину экрана.
    Помогите пожалуйста.
    Чтобы текст по центру был.

    • На самом деле в примере ничего другого и нет, кроме того кода, что вы видите. Чтобы понять, в чём у вас проблема, сделайте пример в онлайн-редакторе или пришлите файлы на почту.

  • Chris Lee

    Добрый день.
    Подскажите, как к заголовку текста с ссылкой добавить градиентный цве (хотя бы из двух цветов)
    Вот исходный код с одним цветом

    Новинки

    • Вы можете взять код из любого примера на этой странице и поэкспериментировать со стилями. Градиент из двух цветов для вашего варианта например https://codepen.io/html5book/pen/weNxaO. Стили заголовка лучше писать не в разметке, а в объявлении стиля.

    • Artem Polukarov

      Сперва надо завязывать с встроенными стилями.

  • Artem Polukarov

    Кто-нибудь сталкивался с проблемами на safari
    Текст белым цветом пока его не выделишь. Потом принимает цвета градиента