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

I recently came across this cool blurred, rotating gradient border effect by Ana Tudor, and tried my best to recreate it!

🔗 Links

Get a YT membership: Join this channel to get access to perks:

⌚ 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

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!

[georgecraft]

3:39 "Shaun, I'm recording a video, I'm not doing a livestream..." - soo adorable! 😂

[adnanearef]

For the trailing comma problem you faced, I was shoutting at you: "It's the trailing comma, Kevin delete the trailing comma" 🤣

[curiouslycory]

I know you could have made this so much more concise as a tutorial but watching you work through the process of solving this problem was SO valuable for me. Thank you!

[shyammehta]

Watching you resolve issues is really motivating as a beginner

[amdbest]

Tbh, i prefer watching someone get stuck and see how to unstuck is much better than just a tutorial with a scenario, also seeing the real process for someone todo something

[DanielDeight]

I watch for a few minutes and scream at you, comma at the end, comma at the end and I was so happy when you noticed :D

[captuhu]

FYI mask-mode:luminance; would allow you to use black and white. Alpha is the default because it renders a little faster.

[QuintessentialDio]

This is pure gold! I recent worked on a gradient border and I also had the idea of using mask-image and border image, woulda turn out the same with yours except I didn't even know bout the CSS registering property hahahaha...glad I learnt something! Thanks Kevin.

[laxmandeadpool]

I'm mostly a native mobile dev but still watch your content time to time, I get a lot of inspiration from this type of videos and with somewhat similar approach we can implement same effect of native canvases.

[BlockCylinder]

I was never going to get all the way there, but I did know you could build directly on the border. I'll take that as a win!

[ScriptRaccoon]

Soooo sweet that scene with your son 😊

[gramatical_damage]

Kevin: figures it out the right approach in 20 minutes and calls it a struggle.

Me: struggle for 2 hours to style and position a simple modal and calls it a win.

I wish my struggles were more like yours 😂. Really cool video!

[francescos]

Interesting video. I just want to point out a few things:

- When overlapping mask images, a pretty useful property is mask-composite, which lets you decide how the mask images interact. (If you want to use it, remember to also use the relative -webkit property)

- Use a modern color space like "oklch" in <whatever>-gradient(in oklch, blue, red). colors will look much better than before 🤩. Gradients in srgb can be a little unsaturated.

Still a great video ❤.

[ZynSays]

I was screaming "just use blur!! blur!!" inside my head the whole time 😭
Amazing job, though!! I always love seeing multiple ways to get to the same result!

[carstenaltena]

I've learned something: that I don't know much modern CSS.

[GundamTricks]

I came here from your Frontend Masters course, which I loved. I learned a lot of new things. Subscribing to your channel is a must.

[matthieuaubert]

Remark : filter: blur() does not combine with mask-image apparently, however backdrop-filter: blur() does, which is very nice, the opacity of the mask-image controls the intensity of the blur

[darrylchallenger]

Thanks for this - I was thinking border, but I didn't border-image was a thing. Thanks also for being real and looking stuff up!

[TheOnceAndFutureDoug]

For anyone who missed it, the reason you need to use "transparent" instead of "white" is because luminance masks are only supported within SVGs and otherwise you need to use an alpha mask. It's not explicitly spelled out in a lot of places and I keep running face first into that bug on a semi regular basis.

[persv]

Well done, perfect lunch break content ;)