Gradient not working when there's a background color

Question

so I'm trying to add a gradient text to my website, however, it doesn't work when there's a background color.

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}
* {
    background-color: #1c232d;
    font-family: 'Montserrat', sans-serif;
}

<div class="title" id="maintitle">
  <h1>
    Welcome!
  </h1>
</div>

What is causing it?How do I fix this?

Answer 1

If you define a gradient as a background-image and a background-color for the same element, only one of them will be displayed if they both cover the complete element (which they do as long as no clipping is added, and if it's added, both are clipped).

For an additional background color you need to add an additional parent element that gets that background color:

(note after edit of question snippet: also the * selector applies to the #maintitle element in your snippet, so although there are two CSS rules, the background-image and background-color settings in them apply to the same element, for which the above also applies: the background-color overwrites the background-imge/gradient)

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.wrapper {
   background-color: green;
}

<div class="wrapper">
  <div class="title" id="maintitle">
    <h1>
      Welcome!
    </h1>
  </div>
</div>