Color gradient in text and border?

Ask us anything
1

Hi,

Is it possible to use a color gradient for a text or a border?
I can’t find anything native in weweb, and I’ve tried custom css but I have the impression that there is a default background in weweb components.

2

I would try to add a element icon , bind the value to “your text”
Or something like a div /container with Hidden, visible etc I’m sure it something doable
Especially since they allow hierarchy between image, color, gradient

3

Hi, Weweb rely on css. Having gradient on text is possible, not on border.
Sadly, after trying, it need to be done on the same element as the one containing the text, and Weweb custom css is targetting the wrapper around it.
So best solution i have for now, is put some class in the head of your app, and apply this class on your text (with the class attributes on the settings tabs, not the weweb class). Soon this will also be available in the editor so this should not be a limitation anymore.

The class should look like something like this

.gradient-text {
    background-color: #f3ec78;
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
2 Likes
4

Thank’s Aurélie !