Create an animated glowing gradient border with CSS
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=-VOUK-xFAyk
Inspired by a codepen by Gayane Gasparyan - https://codepen.io/gayane-gasparyan/p... - I took my own attempt to create a rotating gradient border, including a nice soft glow. • To do it, I use @property, which doesn't have fantastic browser support, but near the end of the video I look at why that's not really a big deal 🙂 • 🔗 Links • ✅ My finished code: https://codepen.io/kevinpowell/pen/QW... • ✅ Codepen that inspired this video: https://codepen.io/gayane-gasparyan/p... • ✅ More on @property on the MDN: https://developer.mozilla.org/en-US/d... • ⌚ Timestamps • 00:00 - Introduction • 00:22 - The HTML • 00:37 - The custom properties and base styles • 01:50 - Adding the gradient and glow with pseudo-elements • 03:40 - Using @property to make the gradient rotate • 05:44 - Switching to a conic-gradient • 06:45 - Finishing touches • #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... • 💖 Support me on Patreon: / 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. • Twitter: / kevinjpowell • 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!
#############################
