I was recently asked about creating the glowing border effect from Google's AI Mode, and it sounded like a fun challenge, so here's how I did it!

🔗 Links
✅ Finished code: https://codepen.io/kevinpowell/pen/WbbXRPL??editors=1100
✅ The site where I got the effect: https://search.google/ways-to-search/ai-mode/

https://kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
00:30 - the HTML and starting CSS
01:30 - Setting up the border
06:48 - Faking a transparent background
09:00 - Adding the outer glow
13:20 - Making the inner glow
16:55 - Tweaking the values of the blur
18:18 - Adding custom properties
20:07 - Flipping it to the other side
22:25 - Improving and customizing the gradient
24:30 - Animating the gradient and glow by changing the colors
27:35 - An easier way to animate it

#css

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join

---

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

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

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:

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!

Kevin Powell

A comprehensive tutorial demonstrating how to create an animated glowing border effect using pure CSS, inspired by Google's AI search interface. The technique uses conic gradients, pseudo-elements, and CSS custom properties to achieve a dynamic glow that works with any background color and supports both light and dark themes. The implementation includes positioning tricks with z-index and stacking contexts, blur filters for the glow effect, and registered custom properties for smooth animations. The tutorial also covers creating variants for different border positions and making the effect easily customizable through CSS variables.

Make an animated glowing border effect with CSS

<p>Cool this looks neat. Thanks for the video 🙌🏻</p>
