Градиент текста в Zero Block

Как сделать в Фигме

  • Настраиваем градиент для текста.
  • При выделенном текстовом слое переходим во вкладку inspect, в правой панели в Фигмы.
  • Находим раздел Colors. Переводим hex в css. Копируем код градиента с помощью кнопки Copy.
У меня получился следующий код:
background: linear-gradient(90deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%);

Как сделать в Тильде

  • Создаем дизайн в Zero Block.
  • Нажимает на текстовый элемент правой кнопкой мыши, выбираем Add CSS class name.
  • Задаем название стиля, например, gradient.
  • Добавьте в Zero Block html-элемент.
  • Копируем код ниже и вставляем его в html-элемент, используя кнопку Edit Code.
<style>
.gradient {
        background: linear-gradient(0deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%);
        background: -webkit-linear-gradient(0deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}

.gradient .tn-atom {
    display: inline;
}
</style>
  • Строку background: linear-gradient(0deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%); заменяем на тот код, который скопировали с Фигмы.
  • В строке background: -webkit-linear-gradient(0deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%); меняем значения (0deg, #FA2B75 0%, rgba(109, 26, 177, 0.96) 34.9%, rgba(255, 192, 0, 0.94) 79.17%), на те, которые были скопированы из Фигмы.
  • Обратите внимание на параметр 0deg. Он отвечает за угол наклона градиента и может иметь значения от 0 (направление градиента слева на право) до 360 (направление градиента снизу вверх).
  • Сохраняем изменения в Зеро блоке и публикуем страницу.

То, как работает этот эффект, вы можете видеть в заголовке данной статьи.
Made on
Tilda