Color gradient in text and border?

[Tang]

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.

[Zacharyb]

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

[aurelie]

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;
}

[Tang]

Thank’s Aurélie !

[raelyn]

Thanks @aurelie, that works! What if I want the gradient to only be on certain words in the paragraph?

[aurelie]

You can use the fact that the text you bind is html, just add a span around your word, with the correct class.

My text <span class="gradient-text">here with gradient</span> other part of the text

[raelyn]

Hey @aurelie I am getting this error, in editor the text disappears and in published app the gradient doesn’t exist… what am I doing wrong?

If i put “glowing” within the html class in weweb settings then it works (but I can only use this if I want the gradient on the entire thing)

[Max]

Hi @raelyn
You cannot use double quotes within a string like that. Javascript will think that your string ended before glowing (the double quote marks the end of the string in JS). If you do it like this, you will be fine:

You need to put a backslash before all double quotes withing your string so that JS knows, that it is part of that string and does not mark the end of it.

Max

[Broberto]

Another approach is to just do

'Some text ... <span class="glowing"> Text </span>'

this way you can escape the double quotes " " with single quotes ’ ’ and you don’t have to use \ to escape the special chars. It’s cleaner imo.

[Max]

Sure!

I prefer escaping the quotes

[what.gift]

Do you have to publish the app to see the results or will this work in preview mode? I don’t have publishing rights yet to test is why I’m asking.

I’m struggling to see it working and get validation error too when adding to the head. I’ve added the style tags.

<style>
.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;
}
</style>

Also, when I add to Custom CSS, my text goes invisible in the editing mode. I just can’t seem to get this to work whichever way I try.

[Zacharyb]

Just brainstorming, for applying kind of a gradient on a border, using shadow with no spread etc + custom colors would kind of act visually as a flat border ?
didn’t trying or thinking it too long tho, just an idea

[Joyce]

Hello

If you add custom CSS at element level, you should be able to see it in preview mode.

Here’s your example in action: https://youtu.be/78ig2rSb9fM

If you want to add custom CSS through a stylesheet or at page or app level, then indeed you will not be able to see it in preview mode.

To achieve this result:

I added your code in the head of my page:

And a class name on my text element in the styles tab:

EDIT: if you want the result from the screenshots above, you can also preview in the editor by tweaking the CSS on the text element (color and image instead of background-color and background-image:

Hope that helps!

[what.gift]

Hi Joyce,

I really appreciate your reply and personalised video. Thank you so much. It’s helpful to see how you’ve achieved it.

I’m stumped however. I don’t seem to get the same results. I’ve tried a lot of options. (Maybe your Beta version is newer, I wish I had the animation option - ha)

So my text goes white as soon as I apply this and the same in preview mode:

    background: linear-gradient(45deg, #f3ec78, #af4261);
    background-clip: text;
    color: transparent;

I’m trying to achieve it clipped like:

The crazy thing is if I apply the exact same style in the browser console, I get the gradient I’m looking for! Go figure?

I have the above CSS working in CodePen, I have other code from CSS Portal also working, it’s just WeWeb it seems…

[Mark_Pederson]

Gradient Borders in CSS | CSS-Tricks

[liam_putra]

Any update on this ? whats the correct solution here ?

[what.gift]

TBC. I haven’t been able to resolve it yet. Would love to know.

Maybe it works when the weweb site is published, but I haven’t tested that and wouldn’t want to rely on that either as the draft version should reflect reality.

[jptrinh]

Hey
You can preview it in the Editor by adding an HTML Embed in the page with a style tag inside.
In the styles, you can target a tag or a class. If you target a class, don’t forget to add it in the Settings panel of the text.

<style>
.gradient-text {
background: linear-gradient(45deg, #f3ec78, #af4261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

[what.gift]

Works! Neat trick thanks.

That’ll help for now. Although it would be nice to see work in the editor in the future.

[khara]

so cool, thanks for sharing! can’t wait to try