Join the Webstudio community

Updated 4 months ago

Gradient on text

At a glance

The community member is new to Webstudio and is trying to figure out how to apply a gradient to text. The comments provide the CSS code to achieve this, and another community member confirms that it can be done in the visual builder. However, the community member then runs into issues trying to apply a gradient to a border, and the discussion turns to the challenges of working with advanced CSS features in a visual editing environment. While there is no explicitly marked answer, the community members share their experiences and provide some helpful suggestions.

Useful resources
Hello,
I'm new to Webstudio, I'm starting to find my bearings on the basics (I come from wordpress and divi), I have a question how do you make a gradient on text. I've tried adding CSS to the text but I can't find all the settings. Thank you in advance for helping me :-). There's a way to do it natively where I add CSS
1
B
O
L
16 comments
Plain Text
  background-image: linear-gradient(#eee, #333);
  background-clip: text;
  color: transparent;
you can do this in the visual builder, the only thing you need to get elsewhere is the gradient itself
Thanks for writing the CSS, I've seen where it is in the visual builder and how to set it up.
Hello, I'm having trouble with the very basic Css aspects of the configuration. I want to put a gradient on a border. I can't find the border-image? Thanksr the border
oh yes thank you πŸ™‚ sorry I'm having trouble finding my basic Css πŸ™‚
me too :), but support here is really good
actually a quite advanced css feature that wasn't even widely supported just a few years ago, lets not call it basic
Yes, you're right, a lot has changed since the css. On the advanced at times I have a little trouble finding things. When I say basic, I mean sorry. In any case, it's great and I can't wait to see how it evolves.
Its incredible what we can do today with CSS
just getting that power fully into a visual editing environment is going to be our goal for years to come
Hello, re
I've set my gradient, now I want to set a radius except that the border radius is applied to the background that I've set to white and not to the border. I'm having trouble understanding.
Attachment
Capture_decran_2024-11-18_a_09.40.50.png
Ok this is not possible in first intention Css but with flex etc... I was able to do this
Attachment
Capture_decran_2024-11-18_a_10.28.25.png
great a little border-area πŸ™‚
Add a reply
Sign up and join the conversation on Discord