 The other day I was on CodePen's trending page and I saw this really cool CodePen by Gyan Gasparian that I really liked with this gradient border that could move around and that's a lot trickier than it actually looks and just having the glow follow it around is really cool too. So I needed to see if I could figure out how to do this and let's dive into what I figured out and how I solved this type of problem. So the first thing we're going to need is here in the body, we need a card, we need something to work with and that's actually all the HTML we're actually going to need for this one. So from there we want to go over to our CSS and set things up so we can get started on this. The first thing we need is some colors. So I just found some colors that I sort of like to play around with a little bit to give us a nice gradient that we'll eventually be using. So the first thing we'll do is on our body use one of those colors to set us a decent dark background that's not blasting us in the face with a normal white background like you might get. And with that we have something that looks just like this and now of course we need the actual card that is there on the screen as well or it's there we'd actually need to see it. So because this is a silly little demo that we're just throwing together I'm putting a height of 60 VH on there just so we have something to work with. And to give it a width that's not full size I'm just using an aspect ratio. So if I increase the height the width would go along with it maintaining an aspect ratio as that property's name implies. Now as we've just established this is a solid demo so it always looks better when things are centered on the viewport. So we can do that by using a min height 100 VH and display grid with place content center to get our card right in the middle. Now jumping back to the card itself we can add a position of relative on there because we're going to be using pseudo elements to create the gradient order and the glow effect on this. And with those we'll be using position absolute on them. So we can use position relative here to ensure that this is the containing block and those pseudo elements don't start going all over the viewport and doing weird things. Now both the before and after pseudo elements in this case are going to be almost exactly the same so we can use one selector to set most of the properties for these. In this case the content just to make sure they show up on the page along with the position absolute. I'm using an inset of zero which is a top bottom left and right of zero. So they're the same size as our card as well as just setting a background on here now that will change a little bit down the road. The one thing that is missing is the border radius on these and luckily that's a really easy fix where we can just use a border radius of inherit and by doing that it takes parents border radius. So if we ever change the border radius on the card it will change the border radius on the pseudo elements as well. Now these will eventually get pulled backwards. We can use some Z indexes and stuff like that to pull that off. But for now we're going to keep things in front just so we can really see how this effect is working. And then at the very end we'll pull it backwards to get the border effect that we're after. And the first thing we can do though before we get around to any of that is updating our background to a gradient. Like I mentioned we'll just use three of the color stops based on those custom properties that we had earlier. As far as getting the glow that actually matches the gradient the easiest thing to do is choosing one of those two pseudo elements and just using a filter to blur it and then it gets exactly what we want if as this is rotating around that element is also going to be rotating or the gradient will be rotating and the blur will follow that around and it will all match up which is really really cool and a nice way to make gradient shadows or glowing effects. Now what you might think is using a transform to rotate the pseudo elements around but as you can see here that does not quite work as we'd want to get that type of effect going. Another thing that might come to mind is a clip path but a clip path on the parent would prevent anything from coming outside of that parent so that also does not work. So instead of doing that we're going to have to rely on something completely different which is using Houdini and the app property. So the app property is a way that we can register a custom property and the advantage of doing that over doing it with a regular custom property like this in our route is we're giving more information to the browser on that custom property because normally a custom property it could be literally any value you can store anything you want inside of them and that means that the browser doesn't always know what that value is it doesn't know if you can animate it or not so it just assumes that you can't by registering a custom property you can tell it that it's an angle or a number or a string or different things and then the browser will know if that means it's actually an animatable property or not and if it is then well you can animate it. Now you'll notice the syntax highlighting on here is not very good because yes code is probably a little bit confused because it is an experimental technology though it is supported in Chrome right now and Safari is actively working on it but we'll see that that's not the end of the world even if all browsers don't support this when we get much closer to the end but for now we'll see that this does work the important thing is you are telling it the syntax we're giving it an initial value and we're also telling it whether it inherits or not whether this is true or false in this case won't actually change but it is important that we have all three of these declared or the property will not register and by registering it what that means is we can do something like this which is we can actually animate a custom property value which is something that we could normally not do when it is just something that we declare in our route just super exciting and of course that means now we can come over to our card here and we can replace this zero degrees that we'd originally set up with our gradient angle there and well nothing will change yet we can then add an animation declaration on there that's using that rotation animation that we just created and as you can see the gradient is now actually animating now we could leave this just like this but one thing is because some of the sides are shorter and some of the sides are longer it's actually going to appear like the gradient as it's turning around at some points will speed up and then slow down just because we're not dealing with a perfect square in which case it would probably see much more linear in its actual animation now one solution for this is instead of using a linear gradient is we could use a conic gradient we do that though and keep everything else the same it will break but instead of that we just want to include the from before we declare the angle and then we'll actually see that it's working though it is not perfect yet obviously but i want to leave it like this is to show you what the conic gradient normally looks like when we set them up and so we can see it's actually starting from the middle and sort of coming out but not like a radial gradient where it's like concentric circles coming out which would be useless in this case where we're going from one of the colors and sort of rotating around and changing that way but of course it leads to this problem where we have a solid line there and we also get that acceleration that's sort of going on a little bit because once again we're not in a square but we can fix all of that by simply looping back through so we have the three four five four three and now you can see that we actually get this being much more uniform we get rid of that line that's there and our gradient is rotating around and looks pretty good i think so now that that's in place then now that it's actually animating we want to pull it behind the actual card itself that's very easy to do we can simply use the z index of negative one on the two elements we have here so they're pulled behind the parent now of course this leaves the problem that we don't actually have the border anymore because of this inset of zero where the non-glowy version of it is the same size as the element itself but that's a nice simple fix where we can just use a negative point five rem or something as long as the inset is negative to pull it out by that much and now we have this rotating gradient border with border radius and everything it's really cool and really awesome but of course there is the problem where browser support is not perfect and that means if a browser were to come along this and it wasn't to work it would be the same as this not being there but look at that even if this is not being declared everything ends up working out pretty well because all it means is that that custom property that was we're using our gradient angle lower down it doesn't recognize that it's not declared anywhere so then it just defaults to being zero and we still get this really nice looking effect though it's obviously a little bit cooler when it's rotating around but in a case like this this is a really nice progressive enhancement where it's a little bit of a nicer effect for browsers that are up to date and for older browsers they still get like 95 percent of it and it's not really going to change the user experience in any meaningful way and if you enjoyed this video but you'd like to take a card like this and sort of 3d it and break the background off and even maybe have it tracked by the mouse well i covered that recently and that video is right here for your viewing pleasure and with that i'd like to thank my enablers of awesome johnny michael ralph simon and tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome