Join the Webstudio community

Updated 3 months ago

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
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
Attachments
SCR-20240916-prsi.png
SCR-20240916-prod.png
B
O
M
9 comments
Did you try to set color: transparent?
-webkit-text-fill-color is non standard property and should be avoided
Btw we use this in webstudio landing too
Attachment
image.png
and background-clip is available without prefix
I mean we prefix it for you
For very old (before January) chrome
I works fine now! Sorry guys, I was making the change on background (color) section...
Yeah, might be not trivial.
@Oleg Isonen Maybe show some guide or shortcut when clip text is specified?
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
Sign up and join the conversation on Discord