How to Create a Border Gradient on Webflow: Step-by-Step Guide

Tutorial
July 18, 2023
3 min
Representation of the creation of a gradient border on Webflow.
Key points

Disclaimer : For this example, we will create a button with a border gradient, but this trick can just as easily apply to a div block.

Although it's possible to create gradients natively in Webflow, they are not applicable to the CSS property "border." Thus, it is "natively impossible" to create a border gradient in Webflow.

Unless... you use the following tips

Create a border gradient on a button in 3 steps

1 - Create the button in Webflow

Creating a button in Webflow with a link block + a text block inside
A Link Block (Parent) + a Text Block (Child)

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

To build the button structure:

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

Now, let's adjust the size of the button:

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

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

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

Designing a linear gradient background in Webflow
Linear Gradient Background

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" → "Background" panel.
  3. Click the "+" icon next to "Image and Gradient" and choose "Linear Gradient" as the type.
  4. Change the angle of the gradient on the direction dial (e.g., 90 degrees).
  5. Click anywhere on the gradient bar to add a stop.
  6. Click on the color sample below the gradient bar to select a color stop to start building your gradient.

You can add as many stops and colors as you like; this will 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 1px border, you should add 1 pixel of inner padding in your CSS.

  1. Select the block
  2. Add inner padding

3 - Match the button color to the page color

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

Final step!

Now you just need to 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 the sample to open the color picker and select a color to match the background color of your button with the body of your page (e.g., "white").

__________________

Conclusion

And there you have it! In three simple steps, you have learned how to create a border gradient in Webflow. To recap:

  1. Create a button in Webflow and adjust its size.
  2. Create a linear gradient on the parent block (enclosing your text block, for example) that will serve as the future border.
  3. Match the button color to that of the page to create the illusion of a "border."

This little "trick" allows you to enhance the aesthetics of your buttons or div blocks, even when the feature is not natively available in Webflow's CSS.

Want to learn more web design tips like this one?

→ Follow us on our YouTube channel for more guides and advice, and continue to learn, experiment, and innovate with Webflow!

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today