Create an animated, glowing, gradient border with CSS

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

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

[neonart_]

I am learning a lot through your video thankuu

[okosmik]

You have made CSS truly fun and understandable, thanks.

[RaymondHulha]

This might just be my favorite CSS Video of all time

[NeoMatrix]

I just went down the rotating gradient rabbit hole like a month ago. When I saw your title and thumbnail, I was scared you were going to show something I missed 😅. But I got to the angle property point and decided to go in a different direction because of browser support.

Keep up the good work! Watching your videos has reignited my interest in front-end developement.

[markovujanic]

Kevin,
This is such a nice format for tutorial. You clearly explained step by step how this works. Thank you

[alichalawi]

I barely know your channel and already benefiting from your videos...

I copied your Cool 3d card that follows the mouse movement using JavaScript as part of my training abd learned so much advanced css coding and tricks

Just want to say thank you for your enormous efforts and knowledge that ur sharing with us (beginners&students)

May allah bless you 😘

[troubleshot_]

I like these shorter style video's where you don't type, but paste! Good job 👍

[ThomasGodart]

Ok, I'm baffled. That's really good work!

[questionmark]

Whenever i watch your video i literally think that why are your videos soo much related to the my problem you are video are very good and the knowledge you provide is literally the nest level thankyou you for providing the knowledge by the way i am from Indian and know ..

[cristianferreira]

Súper !! More videos like this please!! Thankyou!

[GayaneGasparyan]

I just discovered this! Thank you Kevin for making this tutorial!
A lot of people were asking for a tutorial, so I would like to put your video inside the pen, if you don't mind

[mebamme]

I think even in a square box the gradient rotation would have looked slightly off - to have a constant apparent speed along the outline, you'd probably need a circle.

[vladropotica]

Thank you for your videos, i started learning code half a year ago and many of your videos taught me alot

[angryjellyfish]

Thank you!!! saw something like this a couple of days ago and was going message you to see if you could do a video on it :)

[junsu-ho]

more effects and cool animations, please

[akukral]

Great video! Would love to see more tutorials and/or examples of practical, forward progressive applications of @property.

[bedtimehorrorstoryyoutube]

As always really helpfull :) I will use it in my projects thanks to you!

[SvenThielen]

I found a neat trick to get another type of animation to work in firefox by pasting the code below just after the one described in the video:
@-moz-document url-prefix() {
.card::before,
.card::after {
background: linear-gradient(
45deg,
var(--clr-5), var(--clr-4),
var(--clr-6), var(--clr-7),
var(--clr-5), var(--clr-4),
var(--clr-6), var(--clr-7));
background-size: 450% 100%;
animation: ffspin 3s linear infinite;
}
}
@keyframes ffspin {
0% { background-position:0%; }
100% { background-position:96%; }
}

Colors I used:
--clr-4: #2d8f85;
--clr-5: #38CFD9;
--clr-6: #637c54;
--clr-7: #4e00c2;

[Ramnathk]

Thanks Kevin for these fun tutorials. One question I have however is that with majority of traffic coming from mobile devices how can we translate some of these effects to touch based (micro)interactions?

[PicSta]

Hey Kevin, great video. Why aren't you going with the unit dvh instead of vh. Just to keep it right and think at the mobiles devices out there. Apart from that, all good as usual.