Badge Webflow Award Winner 2023

How to create a border gradient on Webflow: Step-by-step guide

Published on 
18/7/2023
-
Amended on 
2/8/2023
Reading time: 5 min
Representing the creation of a Gradient border on Webflow
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

Learn how to create a gradient border on a button in Webflow with our step-by-step guide. CSS ticks 🤓

Key points to remember

‍Disclaimer: For the example, we're going to create a button with a border gradient, but this trick can just as easily be applied to a div block.

Although gadients can be created natively in Webflow, they are not applicable to the "border" CSS property. It is therefore "natively impossible" to create a border gradient style in Webflow.

Unless... you use the following tips

Create a border gradient on a button in 3 steps

1 - Create the button on Webflow

Creating a button on Webflow with a link block + a text block inside it
One Link Block (Parent) + one Text Block (Child)

First, let's create a button and add a call-to-action text inside.

To build the button structure :

  1. Drag a link block from the "Add" panel onto the Webflow canvas.
  2. Add a block of text inside the link block.
  3. Double-click on the default text to change it (e.g. "Contact us").

Now let's adjust the size of the button:

  1. Select the text block.
  2. Open the "Style" panel → "Spacing".
  3. Add a padding at the top and bottom of 1rem, and on the left and right of 1.5rem.

Tips: To simultaneously increase or decrease the margin or padding on the complementary sides of an element, use Option + mouse drag (on Mac) or Alt + mouse drag (on Windows).

2 - Create a linear gradient on the parent block (future border)

Designing a linear gradient background on Webflow
Background Linear Gradient

Now you can add a color gradient border to your custom button.

To add the gradient to the link block :

  1. Select the link block.
  2. Open the"Style" panel→ "Background".
  3. Press the plus icon to the right of"Image and Gradient" and choose"Linear Gradient" as the type.
  4. Change the gradient angle on the direction dial (e.g. 90 degrees).
  5. Click anywhere on the gradient bar to add a stop.
  6. Click on the color swatch below the gradient bar to choose a stop color to start creating your gradient.

You can add as many stops and colors as you like to create the gradient.

Then create an inner padding on the parent block with the gradient → the size of this padding will be the thickness of your border. So if you want a 1 px border, add an inner padding of 1 pixel to your CSS.

  1. Select block
  2. Add interior padding

3 - Match button color to page color

Add a background color white to the text block of a Webflow button
Magic!

Last step!

All you need to do now is align the background color of the text block with the page color to create the illusion that the parent background is simply a border. To do this :

  1. Select the text block.
  2. Open the "Style" > "Background" panel.
  3. Click on the sample to open the color selector, and select a color to match the background color of your button with the body of your page (for example, "white").

__________________

Conclusion

And that's it! In three simple steps, you've learned how to create a gradient border in Webflow. To recap:

  1. Create a button on Webflow and adjust its size.
  2. Create a linear gradient on the parent block (e.g. encompassing your text block) which will serve as the future border.
  3. Match the color of the button to that of the page to create the illusion of a border.

This littletrick lets you improve the aesthetics of your buttons or div blocks, even when the function isn't natively available in Webflow CSS.

Want to learn more web design tips like this one?

→ Follow us on our YouTube channel for more guides and tips, and keep learning, experimenting and innovating with Webflow!

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop