Framer Tutorial: Creating Gradient Borders

[@motorlancer2813]

Your content is very good ! Can you make a small framer course in which you explain the basics of framer.

[@framer.university]

Thank you! That’s the plan:) releasing it soon! Stay tuned 🫶

[@IslamFaroukDesign]

Thanks a lot I didn't know that I can rotate gradient that easily thus I did it in a simpler way instead of using stack just a frame inside a frame without the need of absolute position and Z index and the text inside is the child of the second rectangle

[@雪鷹魚英語培訓的領航]

HAX Been figuring out all sorts of puzzles myself. Fun stuff.

[@framer.university]

It is fun :)

[@AkinsRealm]

Thank you for this great workaround! I'm not sure why correct section titles are not being shown in the video though 🤔As I see it time stamps are included perfectly right in the video description though, there must be some kind of glitch, which is not a big deal, since you demonstrate the workaround in a really clear way, thank you 😊👍

[@framer.university]

Thanks for the feedback man! :) Chapters showing up correctly for me. Must’ve been some bug.

[@AkinsRealm]

@@framer.university Ah thankfully now they look fixed to me as well, agree, must have been some bug 🙌

[@trattface]

Great timing. Literally started framer this week and noticed that the option wasn’t there

[@framer.university]

Glad I could help! :) Come back for more info. Happy to help with anything you’re struggling with 🫶

[@Chirag-Madhu]

Thanks a lot Nandi for this🔥

[@framer.university]

🤝

[@noeveronweb]

💯 excelent. You're amazing

[@framer.university]

Thank you so much

[@SpeedyRenovations]

Thanks for another great video! Like!

[@framer.university]

Thanks for the support mate :) more to come 🫶

[@KayoDante]

Nice! And if we want to make a secondary version without fill and only with the border gradient, we can do it with a few more steps using the mask property, right? (:

[@framer.university]

Yes, you can definitely use the mask property. I’m not sure if it will work with different labels tho since the button width might be changing and the mask you upload is a fixed svg.

[@morgantat7163]

Cool!

[@framer.university]

Thanks!

[@byNoko]

What if you want to do that while having space between the button and the gradient border ? (With the space being transparent)

[@vinoyvarghese7970]

How to create the button where a small ray of light rotates around the button in default state?

[@framer.university]

Here: framer.university/resources/gradient-border-button

[@EmanuelFoghis]

limitation is cannot use transparent background with the gradient button which is what I am trying to do somehow, any work around?

[@BREEZEFORE]

it looks weird when i zoom out to 80% on my site

[@framer.university]

What do you see?

[@rizkirafly9442]

Does anyone know how to get a video preview framer like this?

[@92randika]

how can i make it anomated all the time instead of hover or click

[@framer.university]

On the right panel, there’s an “effect” section where you can apply a loop effect

[@taccuari-]

dude what happened to your reds? 😅 great vid tho

[@framer.university]

Thanks! What do you mean by reds?

[@kaushalpathak8716]

great idea man. But I have one more way to do that... but this is short

[@teyahombre]

Amazing tutorial! But such a difficult and not intuitive way for framer to do something that should be simple as just adding a border. Really. I love framer but these things ... 😅

[@jalencrisp]

Adding a border is simple, and you can simply do it in Framer. Adding a gradient border is not, even with code.

[@framer.university]

Thanks :) Yes unfortunately this requires a bit of workaround. It’s because on the web, you can’t simple just set a gradient color as a border.

[@P_o.crypto]

Its easyer to do with 2 blocks, both same size but front has 2px border (inset, transparent). So on hover we can change both. But gradient borders is a pain for developers because its hard to make smooth animation if you make another colors. So please just dont do that xD

[@BrialMusic]

it's because rounded buttons don't support gradient borders in code....or something like that :D

[@framer.university]

Yep!

[@jazzeeblaze]

Why not create a frame over a button and set padding to 1px on each side and set fill to gradient? Easy bruhh

[@framer.university]

Have you tried this solution (what you have just suggested)?

[@eaxigaming2465]

First comment 😂

[@framer.university]

The best 🫶

[@seanivore]

he cute

[@nutanbhuva]

i don't know why he use 2 shapes, this can achieve with one shape

[@hyperadapted]

explain

[@tri.wicaksono]

correct, just add fill color to black on text so you dont need second shape for the black one. thanks me later

[@framer.university]

Lemme know how.