Is -webkit-text-fill-color available?

Question

I'm trying to have a text (404) with a gradient.

It's working with the following code:

background: linear-gradient(to right, #ff0000, #00ff00); /* Valeur par défaut */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

When I check on the Chrome console, I can add -webkit-text-fill-color and the clip color is working.

But I don't know how to add the transparent value with the -webkit-text-fill-colorwith this property. I tried in the Advanced Panel but it's not available.

Did I miss something ?

(yes I could add it in an HTML embed but I would prefer to add it directly with the builder - easier to maintain)

Thanks

Bogdan · Answer

Did you try to set color: transparent?

Bogdan · Answer

-webkit-text-fill-color is non standard property and should be avoided

Bogdan · Answer

Btw we use this in webstudio landing too

Oleg Isonen · Answer

and background-clip is available without prefix

Oleg Isonen · Answer

I mean we prefix it for you

Bogdan · Answer

For very old (before January) chrome

Milan Boisgard | Uncode School · Answer

I works fine now! Sorry guys, I was making the change on background (color) section...

Bogdan · Answer

Yeah, might be not trivial. @Oleg Isonen Maybe show some guide or shortcut when clip text is specified?

Milan Boisgard | Uncode School · Answer

It’s s my mistake. The doc is clear: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color ! Don't need some guide don't worry 🙂 But maybe some tutorials or templates could help the community. But it's not a commun use case

Join the Webstudio community

Is -webkit-text-fill-color available?