gradient-css-text

by Miklos Nagy

HTML

<span class="discount-text">
  {{ innerText }}
</span>

SCSS

.discount-text{
  
    font-size: 3vw;
    background: -webkit-linear-gradient(#AAFFA9, #11FFBD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #6f6f6f;
  text-align: center;
  margin: 0 auto;

}

JavaScript

var text = document.querySelector('.discount-text');
text.innerHTML = 'We\'re good to go. ';