TailwindCSS Animated Border Gradient (MIND BLOWING!)
2024 ж. 16 Мам.
6 530 Рет қаралды
Let's create an animated gradient border with Tailwind. It's absolutely stunning, and the technique is super interesting!
📚 Source Code:
play.tailwindcss.com/HGOa6lIqf6
🔗 Socials:
X - x.com/arielweinberger
LinkedIn - / arielweinberger
Timestamps:
00:00 Animated Gradient Border Effect
00:55 Demonstration
01:38 Coding The Effect
08:28 Adjustments/Customization
09:10 Outro
🎶 Credits
Music by: www.bensound.com/free-music-f...
License code: MIQTBMPCVR3OVLX0
This is super nice
Amazing
Wow! - a really great tutorial on how to create an animated border-gradient with TailwindCSS!. Thanks, Ariel. {2024-04-21}
Nice tutorial. Thank you. Would be nice if you could do the same on a shadCN button!
I learnt a lot, thank you! Truly mind blowing.
Amazing tutorial
Nice! ❤
thx bro, amazing content
wow great creation :)
liked it and would like to see more.
Cool!!
very cool 😀
hi Ariel, i love your udemy courses, hence do you thinking to create a complete animation course for tailwind?
I would be interested in seeing if we can use a clipping mask to achieve the same with a transparent background or backdrop-filter on the content element 🤔
Of course, but you can do à clip mask with border radius.
Can the height of the card-wrapper be dynamic (auto)?
I like the explanation, but the audio was kinda low for me. Maybe add mouse interaction next ?
@bumpyy Fixed that in upcoming videos! It was my first video on the channel, took a while to to get the audio sorted. When you say mouse interaction, do you mean like in AuthKit.com, where you move your mouse and the container moves as well?
Yeah, it's mindblowing to use tailwind to do something as basic as this.
Hahahaha, a bro troll -) But yes, true :p
That was cool
Keep it up bro did you have discord
I'll set it up!