Guide
- Effects
- Gradient
- Design
Guide
- Effects
- Gradient
- Design
Guide
- Effects
- Gradient
- Design
How to Create a Gradient Border in Framer
In this Framer tutorial, you'll learn a clever workaround to add gradient borders to your elements, even though Framer doesn't natively support this feature for borders. By the end of this blog, you'll be able to enhance your Framer designs with stunning gradient borders.
Posted by
Nandi
Table of contents
Let’s jump right in by creating a gradient border for your button. We start by adding an extra frame to act as the border.
Create the border frame
Add a new frame: Press
Fon your keyboard then drag out to create a frame. This will serve as our border.
Let’s jump right in by creating a gradient border for your button. We start by adding an extra frame to act as the border.
Create the border frame
Add a new frame: Press
Fon your keyboard then drag out to create a frame. This will serve as our border.
Let’s jump right in by creating a gradient border for your button. We start by adding an extra frame to act as the border.
Create the border frame
Add a new frame: Press
Fon your keyboard then drag out to create a frame. This will serve as our border.
New frame dragged out next to button.
New frame dragged out next to button.
New frame dragged out next to button.
Change the color: Give the frame a white background (or any other neutral color for now).
Cut and paste: Cut this new frame (
Command + X) and paste it inside the button frame (Command + V). This way, it becomes a part of the button flow.
Change the color: Give the frame a white background (or any other neutral color for now).
Cut and paste: Cut this new frame (
Command + X) and paste it inside the button frame (Command + V). This way, it becomes a part of the button flow.
Change the color: Give the frame a white background (or any other neutral color for now).
Cut and paste: Cut this new frame (
Command + X) and paste it inside the button frame (Command + V). This way, it becomes a part of the button flow.
White frame pasted inside the button.
White frame pasted inside the button.
White frame pasted inside the button.
Position the border
Next, we need to adjust the position of this frame so it sits around the button text.
Set to absolute positioning: Select the new border frame and set its position to absolute. This will give us more control over where it sits relative to the button.
Center it: To keep it centered within the button, press
Option + HandOption + V.Adjust the pins: Set all the pins to zero (top, right, bottom, and left) so it keeps a consistent distance from the button's edges.
At this point, you should see that the border is overlaying the button text. To fix this:
Adjust the Z-Index: Select your button text and change its Z-index to a higher value (e.g.,
Z-index: 4). This ensures that the text will be above the border.Rename the border frame: I like to rename this frame to "Border" so it’s easy to reference later.
Now you should have a button with a solid white border that can be customized.
Add a gradient to the border
Now it’s time to add that gradient to the border. Here's how to do it:
Apply the gradient: Click on the "Border" frame and change its fill to a gradient. For instance, you could start with a white color transitioning to a darker shade to create a subtle, elegant effect.
Position the border
Next, we need to adjust the position of this frame so it sits around the button text.
Set to absolute positioning: Select the new border frame and set its position to absolute. This will give us more control over where it sits relative to the button.
Center it: To keep it centered within the button, press
Option + HandOption + V.Adjust the pins: Set all the pins to zero (top, right, bottom, and left) so it keeps a consistent distance from the button's edges.
At this point, you should see that the border is overlaying the button text. To fix this:
Adjust the Z-Index: Select your button text and change its Z-index to a higher value (e.g.,
Z-index: 4). This ensures that the text will be above the border.Rename the border frame: I like to rename this frame to "Border" so it’s easy to reference later.
Now you should have a button with a solid white border that can be customized.
Add a gradient to the border
Now it’s time to add that gradient to the border. Here's how to do it:
Apply the gradient: Click on the "Border" frame and change its fill to a gradient. For instance, you could start with a white color transitioning to a darker shade to create a subtle, elegant effect.
Position the border
Next, we need to adjust the position of this frame so it sits around the button text.
Set to absolute positioning: Select the new border frame and set its position to absolute. This will give us more control over where it sits relative to the button.
Center it: To keep it centered within the button, press
Option + HandOption + V.Adjust the pins: Set all the pins to zero (top, right, bottom, and left) so it keeps a consistent distance from the button's edges.
At this point, you should see that the border is overlaying the button text. To fix this:
Adjust the Z-Index: Select your button text and change its Z-index to a higher value (e.g.,
Z-index: 4). This ensures that the text will be above the border.Rename the border frame: I like to rename this frame to "Border" so it’s easy to reference later.
Now you should have a button with a solid white border that can be customized.
Add a gradient to the border
Now it’s time to add that gradient to the border. Here's how to do it:
Apply the gradient: Click on the "Border" frame and change its fill to a gradient. For instance, you could start with a white color transitioning to a darker shade to create a subtle, elegant effect.
Adding gradient color.
Adding gradient color.
Adding gradient color.
Create the background for the button
To finish off the button’s design, let’s add the button’s background. We’ll need another frame for this.
Create another frame: Draw a new frame and paste it inside the button, just like we did with the border.
Adjust the position: Set this frame to absolute positioning, center it, and pin all edges to zero.
Set the pin values: This time, instead of zero, set the pins to a small value (like
1pxor2px) to create a gap between the border and the background.
This background frame will hold the fill color for the button itself, such as a dark color like black or dark blue, while the border gets its gradient effect.
Round the corners
To make sure everything looks neat and polished, you’ll likely want to round the corners of your button and its border. Select both frames (the border and background) and set the corner radius to something like 107 depending on how rounded you want it to look.
Create the background for the button
To finish off the button’s design, let’s add the button’s background. We’ll need another frame for this.
Create another frame: Draw a new frame and paste it inside the button, just like we did with the border.
Adjust the position: Set this frame to absolute positioning, center it, and pin all edges to zero.
Set the pin values: This time, instead of zero, set the pins to a small value (like
1pxor2px) to create a gap between the border and the background.
This background frame will hold the fill color for the button itself, such as a dark color like black or dark blue, while the border gets its gradient effect.
Round the corners
To make sure everything looks neat and polished, you’ll likely want to round the corners of your button and its border. Select both frames (the border and background) and set the corner radius to something like 107 depending on how rounded you want it to look.
Create the background for the button
To finish off the button’s design, let’s add the button’s background. We’ll need another frame for this.
Create another frame: Draw a new frame and paste it inside the button, just like we did with the border.
Adjust the position: Set this frame to absolute positioning, center it, and pin all edges to zero.
Set the pin values: This time, instead of zero, set the pins to a small value (like
1pxor2px) to create a gap between the border and the background.
This background frame will hold the fill color for the button itself, such as a dark color like black or dark blue, while the border gets its gradient effect.
Round the corners
To make sure everything looks neat and polished, you’ll likely want to round the corners of your button and its border. Select both frames (the border and background) and set the corner radius to something like 107 depending on how rounded you want it to look.
Setting radius to 107.
Setting radius to 107.
Setting radius to 107.
Animate the gradient border
If you want to take things a step further and animate your gradient border, it’s easy to do with Framer’s component states:
Turn the button into a component: Right-click the button and select “Create Component.”
Add a hover state: In the component editor, add a hover state for your button.
Animate the gradient: Click the "Border" frame, and in the hover state, change the gradient’s angle or colors. You could even add a slight rotation to the gradient for an extra dynamic effect.
Animate the gradient border
If you want to take things a step further and animate your gradient border, it’s easy to do with Framer’s component states:
Turn the button into a component: Right-click the button and select “Create Component.”
Add a hover state: In the component editor, add a hover state for your button.
Animate the gradient: Click the "Border" frame, and in the hover state, change the gradient’s angle or colors. You could even add a slight rotation to the gradient for an extra dynamic effect.
Animate the gradient border
If you want to take things a step further and animate your gradient border, it’s easy to do with Framer’s component states:
Turn the button into a component: Right-click the button and select “Create Component.”
Add a hover state: In the component editor, add a hover state for your button.
Animate the gradient: Click the "Border" frame, and in the hover state, change the gradient’s angle or colors. You could even add a slight rotation to the gradient for an extra dynamic effect.
A primary and hover variant of a button animation.
A primary and hover variant of a button animation.
A primary and hover variant of a button animation.
Wrapping up
I hope this tutorial has helped you unlock a new design technique in Framer. Adding gradient borders can make your buttons and UI elements stand out, and with a bit of animation, you can really make it a lot of fun.
Happy designing!
Laters. ;)
Wrapping up
I hope this tutorial has helped you unlock a new design technique in Framer. Adding gradient borders can make your buttons and UI elements stand out, and with a bit of animation, you can really make it a lot of fun.
Happy designing!
Laters. ;)
Wrapping up
I hope this tutorial has helped you unlock a new design technique in Framer. Adding gradient borders can make your buttons and UI elements stand out, and with a bit of animation, you can really make it a lot of fun.
Happy designing!
Laters. ;)
