www.youtube.com Open in urlscan Pro
2607:f8b0:4006:81e::200e  Public Scan

Form analysis
1 forms found in the DOM

/results

<form id="search-form" action="/results" class="style-scope ytd-searchbox">
  <div id="container" class="style-scope ytd-searchbox">
    <yt-icon id="search-icon" class="style-scope ytd-searchbox"><!--css-build:shady--><!--css-build:shady--><span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
        <div style="width: 100%; height: 100%; display: block; fill: currentcolor;"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
            style="pointer-events: none; display: inherit; width: 100%; height: 100%;">
            <path clip-rule="evenodd" d="M16.296 16.996a8 8 0 11.707-.708l3.909 3.91-.707.707-3.909-3.909zM18 11a7 7 0 00-14 0 7 7 0 1014 0z" fill-rule="evenodd"></path>
          </svg></div>
      </span></yt-icon>
    <div id="search-input" class="ytd-searchbox-spt" slot="search-input"><input id="search" autocapitalize="none" autocomplete="off" autocorrect="off" name="search_query" tabindex="0" type="text" spellcheck="false" placeholder="Search"
        aria-label="Search"></div>
    <div id="search-clear-button" class="style-scope ytd-searchbox" hidden=""><ytd-button-renderer class="style-scope ytd-searchbox" button-renderer="" button-next=""><!--css-build:shady--><yt-button-shape><button
            class="yt-spec-button-shape-next yt-spec-button-shape-next--text yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-only-default yt-spec-button-shape-next--enable-backdrop-filter-experiment"
            aria-disabled="false" aria-label="Clear search query" title="" style="">
            <div class="yt-spec-button-shape-next__icon" aria-hidden="true"><yt-icon style="width: 24px; height: 24px;"><!--css-build:shady--><!--css-build:shady--><span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
                  <div style="width: 100%; height: 100%; display: block; fill: currentcolor;"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
                      style="pointer-events: none; display: inherit; width: 100%; height: 100%;">
                      <path d="m12.71 12 8.15 8.15-.71.71L12 12.71l-8.15 8.15-.71-.71L11.29 12 3.15 3.85l.71-.71L12 11.29l8.15-8.15.71.71L12.71 12z"></path>
                    </svg></div>
                </span></yt-icon></div><yt-touch-feedback-shape style="border-radius: inherit;">
              <div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
                <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
                <div class="yt-spec-touch-feedback-shape__fill" style=""></div>
              </div>
            </yt-touch-feedback-shape>
          </button></yt-button-shape><tp-yt-paper-tooltip offset="8" disable-upgrade=""></tp-yt-paper-tooltip></ytd-button-renderer></div>
  </div>
  <div id="search-container" class="ytd-searchbox-spt" slot="search-container"></div>
</form>

Text Content

•


NaN / NaN













•



NaN / NaN









Play (k)






Back





Skip navigation

Search
Search


Search with your voice
Sign in








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

Search

Watch later

Share

Copy link

Info

Shopping


Tap to unmute


2x




If playback doesn't begin shortly, try restarting your device.








•

Up next

Live
Upcoming


CancelPlay Now


You're signed out
Videos you watch may be added to the TV's watch history and influence TV
recommendations. To avoid this, cancel and sign in to YouTube on your computer.
CancelConfirm

Can I build it?
10 videos
Kevin Powell

Subscribe

Subscribed



Share
Include playlist


An error occurred while retrieving sharing information. Please try again later.



0:01






0:02 / 23:04•Watch full videoLive
•
Introduction

•


Scroll for details




CAN I CLONE THIS ROTATING, GRADIENT, INNER GLOW EFFECT?

Kevin Powell
Kevin Powell

Verified
955K subscribers

Join


<__slot-el>
Subscribe



<__slot-el>
Subscribed



1.2K




Share

Download

Download

Save








22K views 6 days ago #css
22,217 views • Nov 27, 2024 • #css

LICENSE

Creative Commons Attribution license (reuse allowed)
Show less
I recently came across this cool blurred, rotating gradient border effect by Ana
Tudor, and tried my best to recreate it! 🔗 Links …...more
...more
CHAPTERS

VIEW ALL





INTRODUCTION

INTRODUCTION

0:00

INTRODUCTION

0:00




SETTING THINGS UP

SETTING THINGS UP

0:26

SETTING THINGS UP

0:26




ADDING A CONIC GRADIENT TO THE DIV

ADDING A CONIC GRADIENT TO THE DIV

1:45

ADDING A CONIC GRADIENT TO THE DIV

1:45




ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50




REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

5:00

REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

5:00




MOVING THE GRADIENT TO A PSEUDO-ELEMENT

MOVING THE GRADIENT TO A PSEUDO-ELEMENT

7:20

MOVING THE GRADIENT TO A PSEUDO-ELEMENT

7:20




STRUGGLING TO ADD A MASK

STRUGGLING TO ADD A MASK

10:30

STRUGGLING TO ADD A MASK

10:30




GETTING THE MASK TO WORK

GETTING THE MASK TO WORK

14:30

GETTING THE MASK TO WORK

14:30




Transcript

Follow along using the transcript.

Show transcript



KEVIN POWELL

955K subscribers
Videos

About

Videos


About


Support on Patreon





LICENSE

Creative Commons Attribution license (reuse allowed)
Show less








#css


CAN I CLONE THIS ROTATING, GRADIENT, INNER GLOW EFFECT?

22,217 views22K views
Nov 27, 2024

1.2K




Share

Download

Download

Save











Shop the Kevin Powell store


Front-end Friends - Cascading Style Sheets
$32.00

Cotton Bureau


Embrace the cascade, and show others your love for CSS, with this t-shirt.
Shop
Cotton Bureau

Front-end Friends - CSS Grid
$29.00

Cotton Bureau


Let the world know that you love CSS Grid!
Shop
Cotton Bureau

Front-end Friends - Explore Color Space
$32.00

Cotton Bureau


Color spaces have really taken off in CSS (pun intended), and we think that's
worth celebrating! If you agree, then this is the shirt for you.
Shop
Cotton Bureau





69 COMMENTS

Sort comments
Sort by
Top comments

Newest first






Add a comment...










@GEORGECRAFT225

6 days ago

3:39 "Shaun, I'm recording a video, I'm not doing a livestream..." - soo
adorable!
Show less Read more
Like
73


Dislike
❤ by Kevin Powell
Reply




1 reply

1 reply







@ADNANEAREF2959

6 days ago

For the trailing comma problem you faced, I was shoutting at you: "It's the
trailing comma, Kevin delete the trailing comma"
Show less Read more
Like
73


Dislike
❤ by Kevin Powell
Reply





·
5 replies


·
5 replies







@CURIOUSLYCORY

3 days ago

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!
Show less Read more
Like
11


Dislike

Reply









@SHYAMMEHTA3289

2 days ago

Watching you resolve issues is really motivating as a beginner
Show less Read more
Like
3


Dislike
❤ by Kevin Powell
Reply









@ONEANDONLYME

5 days ago (edited)

Yes, I was screaming "THE COMMA!" And yes agree, Bluesky is the good place now.
Show less Read more
Like
7


Dislike

Reply









@DANIELDEIGHT

6 days ago

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
Show less Read more
Like
11


Dislike
❤ by Kevin Powell
Reply









@QUINTESSENTIALDIO

5 days ago

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.
Show less Read more
Like
5


Dislike
❤ by Kevin Powell
Reply









@CAPTUHU

6 days ago

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


Dislike
❤ by Kevin Powell
Reply









@BJOERNUHLIG

4 days ago

Ana Tudor is an artist
Show less Read more
Like
1


Dislike

Reply









@SCRIPTRACCOON

5 days ago (edited)

Soooo sweet that scene with your son
Show less Read more
Like
2


Dislike
❤ by Kevin Powell
Reply









@GUNDAMTRICKS

2 days ago

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.
Show less Read more
Like


Dislike

Reply









@HASSANELJEBYLY4346

1 day ago

I found box shadow to work as well, great video, thank you
Show less Read more
Like


Dislike
❤ by Kevin Powell
Reply









@DARRYLCHALLENGER7311

3 days ago

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!
Show less Read more
Like


Dislike

Reply









@MOUNTAINSPIRITTRIBE161

5 days ago

Awesome!!!!
Show less Read more
Like
1


Dislike
❤ by Kevin Powell
Reply









@JONATHANLIBESKIND7641

6 days ago

very nice work, thanks alot !
Show less Read more
Like
1


Dislike
❤ by Kevin Powell
Reply









@BATTLES4U

6 days ago (edited)

OMG that trailing comma! Listen Kevin!
Show less Read more
Like
1


Dislike
❤ by Kevin Powell
Reply









@1SAMSNOW1

4 days ago

thank you so much for the content
Show less Read more
Like


Dislike

Reply









@DINESHKUMAR-EG7DO

5 days ago

need several video challenges like this.
Show less Read more
Like


Dislike

Reply









@THEMULE137

4 days ago

Kevin, you're an Ace with an inner glow
Show less Read more
Like


Dislike

Reply









@ALVAROPRIETOVIDEOS

5 days ago

This was very interesting an challenging!
Show less Read more
Like


Dislike

Reply











COMMENTS 69




Top comments

Newest first











CHAPTERS








INTRODUCTION

INTRODUCTION

0:00

INTRODUCTION

0:00




SETTING THINGS UP

SETTING THINGS UP

0:26

SETTING THINGS UP

0:26




ADDING A CONIC GRADIENT TO THE DIV

ADDING A CONIC GRADIENT TO THE DIV

1:45

ADDING A CONIC GRADIENT TO THE DIV

1:45




ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50




REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

5:00

REGISTERING THE CUSTOM PROPERTY TO ANIMATE IT

5:00




MOVING THE GRADIENT TO A PSEUDO-ELEMENT

MOVING THE GRADIENT TO A PSEUDO-ELEMENT

7:20

MOVING THE GRADIENT TO A PSEUDO-ELEMENT

7:20




STRUGGLING TO ADD A MASK

STRUGGLING TO ADD A MASK

10:30

STRUGGLING TO ADD A MASK

10:30




GETTING THE MASK TO WORK

GETTING THE MASK TO WORK

14:30

GETTING THE MASK TO WORK

14:30




TRYING MULTIPLE LINEAR GRADIENTS

TRYING MULTIPLE LINEAR GRADIENTS

15:20

TRYING MULTIPLE LINEAR GRADIENTS

15:20




FIGURING OUT THE PROBLEM WITH THE TRAILING COMMA

FIGURING OUT THE PROBLEM WITH THE TRAILING COMMA

18:01

FIGURING OUT THE PROBLEM WITH THE TRAILING COMMA

18:01




LOOKING AT ANA’S SOLUTION WHICH USES BORDER-IMAGE

LOOKING AT ANA’S SOLUTION WHICH USES BORDER-IMAGE

19:22

LOOKING AT ANA’S SOLUTION WHICH USES BORDER-IMAGE

19:22


Sync to video time
Sync to video time




PRODUCTS







Kevin Powell tagged products below. Learn more

FRONT-END FRIENDS - CASCADING STYLE SHEETS

Cotton Bureau
$32.00

View




FRONT-END FRIENDS - CSS GRID

Cotton Bureau
$29.00

View




FRONT-END FRIENDS - EXPLORE COLOR SPACE

Cotton Bureau
$32.00

View






DESCRIPTION







Can I clone this rotating, gradient, inner glow effect?
1.2KLikes
22,217Views
Nov 272024
I recently came across this cool blurred, rotating gradient border effect by Ana
Tudor, and tried my best to recreate it! 🔗 Links ✅ Ana’s codepen:
https://codepen.io/thebabydino/pen/WN... ✅ My version from this video:
https://codepen.io/kevinpowell/pen/Ex... ✅ Ana’s post on Bluesky:
https://bsky.app/profile/anatudor.bsk... ✅ Follow me on Bluesky:
https://bsky.app/profile/kevinpowell.co ✅ My Front-end Friend starter pack on
Bluesky: https://go.bsky.app/FfLUXeQ Get a YT membership: Join this channel to
get access to perks:    / @kevinpowell   ⌚ 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 💬   / 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... 📽️ Join as a channel member:
   / @kevinpowell   💖 Support me on Patreon:   / kevinpowell   or through YT
memberships: Join this channel to get access to perks:    / @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. 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!
Show less ...more
I recently came across this cool blurred, rotating gradient border effect by Ana
Tudor, and tried my best to recreate it! 🔗 Links ✅ Ana’s codepen:
https://codepen.io/thebabydino/pen/WN... ✅ My version from this video:
https://codepen.io/kevinpowell/pen/Ex... ✅ Ana’s post on Bluesky:
https://bsky.app/profile/anatudor.bsk... ✅ Follow me on Bluesky:
https://bsky.app/profile/kevinpowell.co ✅ My Front-end Friend starter pack on
Bluesky: https://go.bsky.app/FfLUXeQ Get a YT membership: Join this channel to
get access to perks:    / @kevinpowell   ⌚ 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 💬   / 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... 📽️ Join as a channel member:
   / @kevinpowell   💖 Support me on Patreon:   / kevinpowell   or through YT
memberships: Join this channel to get access to perks:    / @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. 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! …...more
...moreShow less

CHAPTERS

VIEW ALL





INTRODUCTION

INTRODUCTION

0:00

INTRODUCTION

0:00




SETTING THINGS UP

SETTING THINGS UP

0:26

SETTING THINGS UP

0:26




ADDING A CONIC GRADIENT TO THE DIV

ADDING A CONIC GRADIENT TO THE DIV

1:45

ADDING A CONIC GRADIENT TO THE DIV

1:45




ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50

ADDING A CUSTOM PROPERTY TO ANIMATE THE GRADIENT

2:50




Transcript

Follow along using the transcript.

Show transcript



KEVIN POWELL

955K subscribers
Videos

About

Videos


About


Support on Patreon






TRANSCRIPT










NaN / NaN









13:16
13:16
Now playing




RELATIVE COLORS MAKE SO MANY THINGS EASIER!

Kevin Powell
Kevin Powell

Verified
•
•
52K views 5 months ago







26:48
26:48
Now playing




CAN I RECREATE STRIPE’S TEXT EFFECT?

Kevin Powell
Kevin Powell

Verified
•
•
109K views 2 years ago







8:16
8:16
Now playing




IS NEXT.JS 15 ANY GOOD? "USE CACHE" API FIRST LOOK

Beyond Fireship
Beyond Fireship

Verified
•
•
109K views 5 days ago


New







26:54
26:54
Now playing




CENTER THE BOTTOM ROW WHEN USING GRID AUTO-FIT

Kevin Powell
Kevin Powell

Verified
•
•
21K views 3 weeks ago







18:45
18:45
Now playing




MASTERING PERPLEXITY: THE BEST AI SEARCH TOOL IN JUST 18 MINUTES

Tim Cakir
Tim Cakir
•
•
1.9K views 3 days ago


New







34:14
34:14
Now playing




I FINALLY SWITCHED FROM VSCODE TO NEOVIM

developedbyed
developedbyed
•
•
39K views 5 days ago


New







22:07
22:07
Now playing




MY TOP 5 MOST POPULAR FRONT-END TIPS

Kevin Powell
Kevin Powell

Verified
•
•
64K views 1 month ago







20:44
20:44
Now playing




CSS POPOVER + ANCHOR POSITIONING IS MAGICAL

Kevin Powell
Kevin Powell

Verified
•
•
42K views 13 days ago







30:17
30:17
Now playing




TAILWIND V4 IS WAY BETTER THAN I EXPECTED

Theo - t3․gg
Theo - t3․gg

Verified
•
•
114K views 5 days ago


New







30:48
30:48
Now playing




THE FASTEST WEBSITE EVER?

Theo - t3․gg
Theo - t3․gg

Verified
•
•
146K views 3 weeks ago







9:08
9:08
Now playing




A NEW ERA FOR C AND C++? GOODBYE, RUST?

Travis Media
Travis Media

Verified
•
•
87K views 9 days ago







34:04
34:04
Now playing




LEARN FLEXBOX THE EASY WAY

Kevin Powell
Kevin Powell

Verified
•
•
727K views 2 years ago







21:20
21:20
Now playing




WE CAN NOW TRANSITION TO AND FROM DISPLAY: NONE

Kevin Powell
Kevin Powell

Verified
•
•
110K views 5 months ago







39:31
39:31
Now playing




NO ONE HIRES JR DEVS SO I MADE A GAME

ThePrimeTime
ThePrimeTime

Verified
•
•
342K views 1 month ago







16:07
16:07
Now playing




WHY ARE THREADS NEEDED ON SINGLE CORE PROCESSORS

Core Dumped
Core Dumped
•
•
90K views 4 days ago


New







18:51
18:51
Now playing




FLEXBOX OR GRID - HOW TO DECIDE?

Kevin Powell
Kevin Powell

Verified
•
•
745K views 2 years ago







26:52
26:52
Now playing




ANIMATE NAV ON SCROLL - CSS-ONLY & EASY TO CUSTOMIZE

Kevin Powell
Kevin Powell

Verified
•
•
51K views 8 months ago







19:48
19:48
Now playing




WE MAY HAVE KILLED P10K, SO I FOUND THE PERFECT REPLACEMENT.

Dreams of Autonomy
Dreams of Autonomy
•
•
183K views 5 months ago







9:55
9:55
Now playing




PLEASE, DON’T USE VIEWPORT UNITS FOR FONT SIZES

Kevin Powell
Kevin Powell

Verified
•
•
26K views 1 month ago







15:39
15:39
Now playing




CSS ANCHOR IS THE BEST NEW CSS FEATURE SINCE FLEXBOX

Web Dev Simplified
Web Dev Simplified

Verified
•
•
376K views 1 year ago









Show more








WE REIMAGINED CABLE. TRY IT FREE.*

Live TV from 100+ channels. No cable box or long-term contract required. Cancel
anytime.
Dismiss

Try it free