Guide
- Effect
Guide
- Effect
Guide
- Effect
How To Create Gradient Borders in Framer
If you’re looking to add some flair to your Framer website, one way to do so is by creating animated borders. In this tutorial, I'll show you how to create a gradient border effect using Framer’s components, variants, and interactions.
To follow along with this, all you need is a free Framer account that you can create here.
Posted by
Nandi
Table of contents
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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.)
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.)
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.
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.
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.
