Streaming live at 10am (PST)

Gradient Border


#1

I am sure, most of us already thought of having gradient border around text, or box.
For now there is no direct option for that. I am sure guys at Webflow are already working on this.

Meanwhile, let's see how to work around.

Here is result. In this case border around text:

And this is how it's done:

  1. Insert Div Block. Gave it a class and next properties:
    Top, Bottom, Left and Right padding: 2px.
    Give it as much px as your border need to be.

  2. Make Background for Div Block.
    Use either Gradient or Linear. It's up to you.

  3. Inside of Div Block insert Text block or Heading or what suits you're needs. Give it a class.

  4. For Background use same colour as your main background of your page. Or container that Div Block is in. In this example is black.

  5. If you want for your border to be rounded, make Border radius as desired. In this case it's 5px. Do the same for Div Block and for Text. Div Block radius is for outer roundness and Text radius is for inner roundness. I hope that makes sense? wink

And that's how the cookie crumbles wink

Hope this would help someone make better design.


How can I create custom border in Webflow?
Gradient editor bug
#2