Добавление определенного градиента к тексту с помощью CSS

Question

У меня есть изображение с текстом, но его загрузка и отображение не помогают в поиске Google, чтобы действительно найти его, поэтому мне было интересно, смогу ли я получить определенный стиль градиента для моего текста.

так должен выглядеть текст.

Может ли кто-нибудь помочь мне в достижении этого?

Я нашел это, но я действительно не знаю, как его настроить.

.h1 {
      font-size: 72px;
      background: -webkit-linear-gradient(#eee, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;}

    <span class="h1">Ανανέωσε ONLINE & πάρε ΔΩΡΟ MB</span>

Заранее спасибо.

Answer 1

.black-background {
  background: #408e38;
}
.top-clip {
  background: #0d0d0d;
    -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 20%);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 20%);
  padding: 20px;
}

.h1 {
      font-size: 72px;
      background: linear-gradient(to right, #4cab49 , #1eacce);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

<div class="black-background">
  <div class="top-clip">
    <span class="h1">Ανανέωσε ONLINE & πάρε ΔΩΡΟ MB</span>
  </div>
</div>

Answer 2

Вы должны Google для линейный градиент или найти в нем w3c

.h1 {
      margin: auto;
      font-size: 52px;
      font-weight: bold;
      background: linear-gradient(to right, #438f3a , #19acdf);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;}
.h1h {
    background: black;
}   

<div class="h1h" ><div class="h1">Ανανέωσε ONLINE & πάρε <br/>ΔΩΡΟ MB!</span></div>