How do I make my HTML text color an animated gradient with CSS?

Question

I've got a CSS gradient and an h1 element. I want to set the text color to the gradient but it just makes it the background. I've tried an inherit but that doesn't seem to do anything.

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

<h1 style="text-align: center; font-size: 40px;">Welcome To <span class="gradient"><b>Mnazz Suite</b></span></h1>

@AHaworth `background-clip` won't work here, but the more modern `-webkit-background-clip` will. See my answer. — SNBS, Jul 17 '23 at 21:48
@snbs see https://caniuse.com/?search=background-clip it’s not a question of ‘more modern’ it’s a question of where ‘here’ is ie whether the browser requires the prefix or not. That’s why I suggested OP searched for background-clip - places like MDN will tell you if you need a prefix or not. — A Haworth, Jul 17 '23 at 21:52
@SNBS `-webkit-background-clip` is _NOT_ more modern; it is the prefixed version, which was added before the proprtt was standardized enough to be included unprefixed. — Darryl Noakes, Jul 17 '23 at 21:53

SNBS · Answer 1 · 2023-07-18T16:13:13.343

-2

You need WebKit for that. Add this style to .gradient:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Also add background-clip and text-fill-color without WebKit for compatibility.

Note that just background-clip without WebKit won't work here, it'll only animate the background.

UPDATE: see CodePen.

edited Jul 18 '23 at 16:13

answered Jul 17 '23 at 21:47

SNBS

671
2
22

2

Some browsers may need the prefix, some browsers don’t (at this point in time). – A Haworth Jul 17 '23 at 21:54
You do _NOT_ need a WebKit browser for this. E.g., Firefox supports the unprefixed property. If you mean the prefixed variant of the property, that is also mo strictly true; it depends on your browser's support. – Darryl Noakes Jul 17 '23 at 21:55
@DarrylNoakes Yes you do. It'll only animate the background without WebKit. Without prefix it doesn't work in Firefox either. – SNBS Jul 17 '23 at 21:56
Are you referring to the browser or property prefix? – Darryl Noakes Jul 17 '23 at 21:57
2

Add your code example to this answer, not a link to a codepen. Much more helpful to future visitors. Also, FireFox does 100% support the unprefixed property when applied to text. Checkout out the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) – disinfor Jul 17 '23 at 21:58
I wanted future visitors to be able to remove prefix and see changes. – SNBS Jul 17 '23 at 21:58
1

So what if your Codepen link is removed? Future visitors won't get to try anything. Add two examples in a snippet then. – disinfor Jul 17 '23 at 21:59
2

Works fine in Safari iOS without the prefix (of course text-fill doesn’t, but color:transparent is fine for this). How about editing your answer so it is correct? – A Haworth Jul 17 '23 at 22:04
But the OP wants the code to work in other browsers as well. – SNBS Jul 18 '23 at 14:41
You use _both_ properties. Look at the example on the previously linked MDN page, for example. – Darryl Noakes Jul 18 '23 at 15:16
Oh yes, they should be also added for compatibility. Edited my answer. – SNBS Jul 18 '23 at 16:13

How do I make my HTML text color an animated gradient with CSS?

1 Answers1