\`\`\`html

Intrigued by Gradient Borders?

Hi there! I've always been fascinated by those striking animating gradient borders. They have a magical way of elevating your design effortlessly. Take, for instance, the landing page of Arkit. The borders highlight everything from illustrations and cards to buttons and shapes. I thought, "Why not give this a try on Framer?" While currently, Framer only supports solid border colors, there's a workaround to add and animate gradient borders. Let's dive in!

Setting Up the Structure

For this tutorial, I'll use a sample pricing page structure from the Figma Community file. I've replicated this in Framer using stacks and the default navigation bar to give it a page-like structure. We'll use one of the cards as an example to add the gradient border.

First, let's create the structure. Check the dimensions of your business card. Here, it's 4760. Hit F on your keyboard to create another frame matching these dimensions. This gives us a solid starting point.

Next, duplicate this card (Command+D). For this second card, add 16 pixels to the width and height, giving us an 8-pixel padding on each side. Change the color of this new card to make it distinct (blue, for instance). This blue card is our "border card." Place the original card (red) inside it and center-line it.

Refinement

Time for some refining. Rename the blue parent frame as "border card." Now, check the corner radius of your cards. Let's say it's around 44 pixels for the border card. Apply this radius, and set the internal card's radius to 40 pixels. Our basic gradient border structure is ready.

Next, duplicate the entire frame again (Command+D). For the newly duplicated frame, assign a different color (random gray works). Make this frame larger to cover your original "border card" completely. Rename it to "border gradient."

Adding the Gradient

Select the "border gradient" frame and apply a linear gradient. Choose any gradient direction you prefer. Here, we pick purple to white. Now, you have a gradient border theoretically set up. Copy the content from your original card and place it inside the new one with the gradient border. Your card now has a striking gradient border!

Animating the Gradient

Want to animate that border? Change the linear gradient to a more complex gradient effect within Framer. Adjust opacity, coverage, and colors until you get the desired look. For animation, go to effects, select Loop, and set your desired transition time (say 6 seconds).

Initially, the effect might not look right because it's being cut off. Adjust the size of your "border gradient" frame to cover the entire area better. Once you scale it up, the animation will loop smoothly, creating that enchanting moving gradient effect you've been aiming for.

\`\`\` This article walks you through the step-by-step process of creating and animating gradient borders in Framer, showcasing a user-friendly approach to achieve visually captivating design elements.