Is -webkit-text-fill-color available?

At a glance

The community member is trying to create a text (404) with a gradient using CSS. They have provided the following code that works in the Chrome console:

background: linear-gradient(to right, #ff0000, #00ff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

However, they are unable to add the transparent value to the -webkit-text-fill-color property directly in the builder. The community members suggest using the standard background-clip property without the prefix, and note that -webkit-text-fill-color is a non-standard property that should be avoided.

One community member initially suggested using color: transparent, but the original poster was able to resolve the issue by making the change in the background (color) section instead.

The community members also discuss that while this use case is not very common, providing tutorials or templates could be helpful for the community.

Useful resources

MMilan Boisgard | Uncode School

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

9 comments

BBogdan

Did you try to set color: transparent?

BBogdan

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

BBogdan

Btw we use this in webstudio landing too

Attachment

OOleg Isonen

and background-clip is available without prefix

OOleg Isonen

I mean we prefix it for you

BBogdan

For very old (before January) chrome

MMilan Boisgard | Uncode School

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

BBogdan

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

MMilan Boisgard | Uncode School

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

Add a reply

Join the Webstudio community

Is -webkit-text-fill-color available?