Gradient Border

Community resources Webflow Tips
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:

1124×576 102 KB

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.

4 Likes