Can I clone this rotating, gradient, inner glow effect?

Описание к видео Can I clone this rotating, gradient, inner glow effect?

I recently came across this cool blurred, rotating gradient border effect by Ana Tudor, and tried my best to recreate it!

🔗 Links
✅ Ana’s codepen: https://codepen.io/thebabydino/pen/WN...
✅ My version from this video: https://codepen.io/kevinpowell/pen/Ex...
✅ Ana’s post on Bluesky: https://bsky.app/profile/anatudor.bsk...
✅ Follow me on Bluesky: https://bsky.app/profile/kevinpowell.co
✅ My Front-end Friend starter pack on Bluesky: https://go.bsky.app/FfLUXeQ

Get a YT membership: Join this channel to get access to perks:
   / @kevinpowell  

⌚ Timestamps
00:00 - Introduction
00:26 - Setting things up
01:45 - Adding a conic gradient to the div
02:50 - Adding a custom property to animate the gradient
05:00 - Registering the custom property to animate it
07:20 - Moving the gradient to a pseudo-element
10:30 - Struggling to add a mask
14:30 - Getting the mask to work
15:20 - Trying multiple linear gradients
18:01 - Figuring out the problem with the trailing comma
19:22 - Looking at Ana’s solution which uses border-image

#css

--

Come hang out with other dev's in my Discord Community
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
📽️ Join as a channel member:    / @kevinpowell  
💖 Support me on Patreon:   / kevinpowell   or through YT memberships: Join this channel to get access to perks:
   / @kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Комментарии

Информация по комментариям в разработке