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

gradient-text

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Градиентные границы

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

Градиентные границы и текст

  • Создание Сайтов

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

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

  • Алексей

    Здравствуйте, не получается добавить 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); и посмотреть, как оно работает.