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

From the creator

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/WNVPdJg ✅ My version from this video: https://codepen.io/kevinpowell/pen/ExqzKNY ✅ Ana’s post on Bluesky: https://bsky.app/profile/anatudor.bsky.social/post/3lasrgcxyzk2k ✅ 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: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join ⌚ 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 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/

Published 2024-11-27 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.