Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как сделать градиент текста на CSS

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

    Цвет текста в виде градиента получится, если:

  • создать файл стилей с любым именем, к примеру style.css,
  • в нем прописать код для выбранного класса:

    .gradient{
    background: linear-gradient(90deg, orange 33%, violet 66%, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
    }
  • Подключить файл со стилями к сайту:
    <link href="style.css" rel="stylesheet">
  • Блочному элементу, например div, в котором будет находиться текст, присвоить этот class:

    <div class="gradient">текст</div>

Получился линейный градиент текста. Если его надо изменить, то просто меняем значение градусов в коде background: linear-gradient(90deg, orange 33%, violet 66%, green);

Другие значения, указанные в процентах, означают цвета, которые используются в градиенте текста.

Как сделать градиент текста на CSS

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

    Цвет текста в виде градиента получится, если:

  • создать файл стилей с любым именем, к примеру style.css,
  • в нем прописать код для выбранного класса:

    .gradient{
    background: linear-gradient(90deg, orange 33%, violet 66%, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
    }
  • Подключить файл со стилями к сайту:
    <link href="style.css" rel="stylesheet">
  • Блочному элементу, например div, в котором будет находиться текст, присвоить этот class:

    <div class="gradient">текст</div>

Получился линейный градиент текста. Если его надо изменить, то просто меняем значение градусов в коде background: linear-gradient(90deg, orange 33%, violet 66%, green);

Другие значения, указанные в процентах, означают цвета, которые используются в градиенте текста.