Text gradients

To create an effect where your text hasa gradient colour you need to apply a small piece of CSS to your website and then link this code to your text using a css class.

The CSS essentially create a background gradient and then clips/masks your text over it to reveal the gradient on your text.

.gradient-text {
  background: -webkit-linear-gradient(#ff0000, #fff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   display: inline-block;
}

Below is an example of the linear gradient used on the word “Quantative”

To change the direction of the gradient, add the following changes to your original CSS code.

.gradient-text {
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
}