How To Create Gradient Borders in Framer

Step 01: Getting Started with Framer

We simply start by drawing a frame on black background. Fully round its corners. Set its overflow to visible. Set a 5% white fill color. This frame will be the base container of our button.

Step 02: Adding Text and Padding

Add your text inside the button and turn the frame into a stack. Quickly adjust the padding so the button doesn’t look silly.

Step 03: Creating a Component

At this point, we can go ahead and create a component (⌘ + ⌥ + K) to make it easier to create multiple variants of the button.

Step 04: Adding Frames and Gradients

Add another frame inside the button. Set its positioning to absolute. Set all 4 constraints to 0 so it will adopt to the button’s size. Set Z-index to 0. Round its corners. Give it a radial gradient fill. We’ll call this frame “Stroke”.

Step 05: Duplicating the Stroke Frame

Now we want to duplicate this “Stroke” frame. Rename it to “Glow”. Make sure it’s behind the Stroke. Apply layer blur to it. This will give our stroke a nice glowing effect.

Step 06: Adding a Fill Frame

Let’s add the last frame. Set its positioning to absolute. Set all 4 constraints to 2 so it will leave a 2 pixel line around the button. Round its corners. Move it between the Text and Stroke layers. Give it a solid black fill. This controls the button’s fill color.

Step 07: Creating Multiple Variants

Now, let’s create a nice hover effect. Add a hover state for each variant and move the radial blur on the Stroke and Glow frames to the middle of the button while also making the radius of the gradient bigger.

Step 08: Adding a Hover Effect

Now, let’s create a nice hover effect. Just add a hover state for each variant and move the radial blur on the Stroke and Glow frames to the middle of the button while also making the radius of the gradient bigger.

Step 09: Setting up the Animation

All we have to do now is to set up the animation. Connect the first and second variant. Set the interaction to happen on appear. Apply 0.7s delay. Select cycle variant.

Step 10: Adjusting the Transition Settings

Make sure to select the main variant (primary), and find the transition settings on the right panel. Set the ease to linear and the time to 0.8s (yes, this needs to be slightly longer than the delay we set on the cycle variants.)

Final Step: Previewing Your Animated Border

Preview your animated border by clicking the “Preview” button in the top right corner of the Framer interface. You can also publish your website straight from the design canvas by clicking the “Publish” button.

Conclusion: Creating Amazing Results with Framer

That’s it. Now you have a gradient border effect on your Framer website. As you can see, you can do so many things in Framer, even if it seems impossible. Framer is a great tool for designers who want to create no-code websites with ease.