» » Готовые анимированные градиентные тексты

Готовые анимированные градиентные тексты

Яркий градиентный анимированный текст на сайте привлекает внимание посетителей и делает контент более привлекательным и интересным. Он помогает подчеркнуть важные моменты и информацию, делает сайт более запоминающимся и оригинальным. Такой текст создает атмосферу динамизма и современности, привлекая пользователей к более внимательному и длительному взаимодействию с контентом. В итоге яркий градиентный анимированный текст на сайте является мощным инструментом для привлечения внимания, улучшения визуального восприятия и повышения пользовательского опыта.
На блоге уже есть статьи о красивом тексте, в том числе анимированном:

В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги h1 class можно менять на свои, например h2, 3, 4 или strong. Можно менять шрифт, его размер, толщину. Все коды найдены на сайте https://codepen.io.

Вариант 1

Автор Rloria7
Вариант 1


Градиент мягко переливается разными цветами одного оттенка — зелёный, фиолетовый, синий и т.д. 
Код:
<h1 class="gradient">Градиентный текст</h1>
<style>
.gradient {
font-family: Poppins, sans-serif;
font-size: 8rem;
font-weight:  bold;
text-align: center;
color: #ff0003;
background-image: -webkit-linear-gradient(84deg, #FF0003, #FF8F3C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-240deg);
  }
}
</style> 

Вариант 2

Автор Zeeshan Mukhtar
градиент
Градиент довольно динамично переходит по буквам из одного цвета в другой.
Код:
 <div class="txt">
         Градиентный текст
    </div>
<style>
.txt {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    background: linear-gradient(-45deg, #6355a4, red, #e89a3e, aqua);
    background-size: 300%;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 900;
    font-size: 5vw;
    letter-spacing: px;
    word-spacing: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* -webkit-text-fill-color: transparent;/ */
    animation: zee 1s linear infinite;
}
@keyframes zee {
    0% {
        background-position: 0px 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0px 50%;
    }
}
</style> 

Вариант 3

Вариант 3
Градиент очень медленно и незаметно меняет свои цвета. 
Код:
<div class="gradient-text">Градиентный текст</div>
<style>
@keyframes gradient {
0% { background-position: 0% 0; }
50% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}

.gradient-text {
animation: gradient 20s linear infinite;
background: linear-gradient(70deg, rgba(255,38,163,1) 0%, rgba(0,73,176,1) 16%, rgba(238,130,178,1) 33%, rgba(0,194,229,1) 50%, rgba(238,130,178,1) 66%, rgba(0,73,176,1) 83%, rgba(255,38,163,1) 100%);
background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  font-family: Arial;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1.2;
  padding: 10px;
}
</style> 

Вариант 4

Автор Alex Araújo
Вариант 4
Градиент плавно меняется снизу вверх.
Код:
<div>
  <h1 class="text">Efeito Gradiente</h1>
</div>
<style>
div{
  display:flex;
  height: 30vh;
  justify-content:center;
   align-items:center;
}
.text{
  font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
  padding:30px;
  font-size:80px;
  font-weight:100;
  letter-spacing:2px;
  color:#f35626;
  background-image: -webkit-linear-gradient(92deg, #6e26f3, #feab3a);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-animation: hue 2s infinite linear;
}
@-webkit-keyframes hue{
  from{
    -webkit-filter:hue-rotate(0deg);
  }
  to{
    -webkit-filter:hue-rotate(-360deg);
  }
}  
</style> 

Вариант 5

Автор: Ritika Agrawal
вариант 5
Градиент плавно перетекает снизу вверх, сверху вниз.
Код:
<h1>Gradient Text</h1>
<style>
h1 {
        text-transform: uppercase;
        font-size: 72px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background: linear-gradient(
          180deg,
          #fd004c,
          #fe9000,
          #fff020,
          #3edf4b,
          #3363ff,
          #b102b7,
          #fd004c
        );
        background-size: 200% 200%;
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        animation: change 5s ease-in-out infinite;
      }
      @keyframes change {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 0 100%;
        }
        100% {
          background-position: 0 0;
        }
      }
@media(max-width:576px){
  h1{
    font-size:32px;
  }
}</style> 
Вариант 6
Автор JR
Вариант 6
Градиент движется из угла в другой укол текста с небольшим ускорением. Создаётся впечатление, что буквы слегка приподнимаются. 
Код: 
<h1 class='trippytext'>Градиентный текст<br>Пример</h1>
<style>
.trippytext {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 7em;
  line-height:1em;
  text-shadow: 10px 10px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(45deg, #58c8e8,  #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d,  #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d,  #58c8e8);
  background-size:250% 500%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textAnim 5s ease-out infinite;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
}
@-webkit-keyframes textAnim {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
</style> 

 Вариант 7

Автор Coding Tanu
белый фон
чёрный фон
Текст подходит для тёмного фона. На белом фоне эффект смотрится не так ярко. Градиент с мерцанием бежит по буквам.
Код:
<div class="container">
    <div class="wrapper">
<span class="text"> Анимированный градиент</span>
<span class="gradient"></span>
<span class="dodge"></span>
</div></div>
<style>
.container{
        height: 800px;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        .wrapper{
        display: inline-flex;
    filter: brightness(200%);
    overflow: hidden;
        }
        .text{
        color: #ffffff;
        font-size: 70px;
        font-weight: bold;
        font-family:'Dancing Script',cursive;
        text-transform: capitalize;
        background: #000000;
        background-size: 100%;
        padding: 30px;
        } 
.text::before{
    content: "Анимированный градиент";
    position: absolute;
    mix-blend-mode: difference;
    filter: blur(1px);
        }
        .gradient{
    background: linear-gradient(90deg,
         rgb(235, 34, 70) 20.25%
         ,rgb(218, 7, 49) 20.25%,
         rgb(70, 1, 104) 80.25%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
        }
        .dodge{
    background: radial-gradient(circle,
         white, black 45%) center / 15% 15%;
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0%;
    bottom: 0%;
    mix-blend-mode: color-dodge;
    animation: light 3s linear infinite;
        }
        @keyframes light{
    to{
transform: translate(50%,50%);
        }}
</style> 

Отправить комментарий

Комментарии со спамом удаляются.