CSS gradient text

Question

I have a part of a website that involves text with a gradient inside of it. I have tried searching how to do it but nothing is working for me.

What is the efficient way to do this?

.gradient-text {
  background-color: red;
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  font-family: "Archivo Black", sans-serif;
  font-weight: normal;
  font-size: 6em;
  text-align: center;
  margin-bottom: 0;
  margin-bottom: -0.25em;
}

Answer 1

This will add gradient text to all h1 tags:

HTML:

<h1>Gradient text</h1>

CSS:

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

To add a gradient background, not text:

HTML:

<h1>Gradient background</h1>

CSS:

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