Custom gradient border
While browsing Apple.com's site, you might be like Grímur and want to style elements in your site using beautiful, rainbow gradients. Combining the power of gradients and padding, you can style your elements’ borders to have fully customizable gradient borders in the Webflow Designer.
Explore more about background and spacing in our Webflow 101 Course.
Video transcript
So I was on Apple.com spending thousands of dollars. AirPods, iPads, and — oh my goodness. A button with a gradient for a border?
At this point I had two thoughts in my head: One, how do I build that? And two, after I figure that out, I need to buy those sick wheels for my Mac Pro.
First part. 51 seconds on the clock. Time me.
Production value.
But in Webflow, I can build this with a link block (just dragging in a link block). And inside? I’ll add a text block (inside the link block). And here’s all I have to do to make it look like this.
I’m going to size this thing using padding on the text block. And because the text block is inside the link block, it’s making that bigger.
But now that it’s button-shaped, I’ll do three more things and I’ll be done. First, with my link block selected, I'm going to add a linear gradient background. And now I can match Apple's gradient. I’m just going in and selecting each stop in my linear gradient...
[Other Grimur] You’re not even moving the mouse.
[Grimur] And you’re me about 10 minutes after I film this angle.
[Other Grimur] Fair point.
[Grimur] All done. Just two things left: with the text block selected, I need to go in and set its background color to match the body background (just making that white).
And finally? (With my link block selected.) I can add some padding to the link block (adjusting all four sides at once by holding down Shift).
And that’s it. And if I want to round it out? I can add a large radius (using a pixel value) on the text block...and I can go in and to the same exact thing on the link block. (And while I’m on the link block by the way, I can set the text color to black and get rid of that terrible underline.)
So. Link block with a text block inside, size it using padding on the text block, color the link block (that’s the gradient)... and the text block (that’s the solid white), then add padding to the link block to reveal...
[Other Grimur] Oooh, I like that word.
[Grimur] Isn’t it nice?
[Other Grimur] Yeah.
[Grimur] ...Use padding to reveal the gradient in the link block. Round it out? That’s creating a gradient border using padding in Webflow.
