CSS Glowing Border animation

[@4Dul69]

This guy : *Spends 7 minutes explaining how to write the code to get that glowing border* Me who just downloaded this video : "I'm 4 parallel universe ahead of you"

[@TechieCoder]

🤣🤣🤣🤣

[@CodeAtUsman]

:)

[@Liku108]

Class me space kyun rahata he

[@ShubhamKumar-vg3nz]

@@Liku108 Space is there to mention multiple classes, in this code block and glow are 2 different classes

[@nuveon8125]

hahaha same to me my friend!!

[@itsalucky]

Can u send link with sourse code?

[@enemyunknown3445]

Nice... 🎉🎉🎉🎉🎉

[@ZeroMinus652]

Thank You For This Tutorial ❤

[@kilashrao8581]

Very interesting 👍🏻

[@TopTierTales-ux4se]

This is awesome.

[@iamwaver]

NGL it looks like M1 chip. 🤣🤣

[@wojackcodes]

Facts, and now, this also looks like Siri with Apple Intelligence

[@sol____-_-]

Nice.

[@wojackcodes]

This worked for me, thanks! 🎉

[@besmilling6935]

Sir plz say true

[@wojackcodes]

@@besmilling6935 true.

[@juliobascunan4947]

amazing

[@mohdhusain-kn9ns]

nice

[@NoahThul]

really cool!

[@ECprogram.]

Thank i follow you

[@badassaman5528]

can i get a download link?

[@pathfindertogami]

why

[@Ecocyborg]

Can we make it in c# ? 😊

[@ersantoli]

LIKE IT

[@sylenthmen]

gran tutorial :3

[@FLEX_DAISHI]

Mostafa 3rfk kadwr hnaya

[@55ruturajpatil66]

Will it work for white backgrounds

[@wojackcodes]

worked for me with white background

[@cherrycrissycris]

I can't figure out why the color isn't showing up when I tried this. I'm new to CSS, but I've checked over my code and it matches. All I can see is a black gradient box which I knew how to do already.

[@headshotbhaiya8721]

I have also same problem

[@addrish5408]

Same here

[@Alance1]

Can you provide code link please...

[@MetapeterUndMetagreta]

in a textfile named: "rrrainbooow.css" you put: body { background-color: #000; } div { position: relative; margin: 250px auto; width: 500px; height: 500px; background: #000; } div:before, div:after { content: ''; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: mooove 10s linear infinite; } @keyframes mooove { 0% { background-position: 0 0; } 100% { background-position: 400% 0; } } div:after { filter: blur(50px); } in an html file in the same folder with name "icouldntcareless.html" you put:

[@yooslayer6614]

how to make mutliple boxes of this type?

[@Arno_Saks]

ctrl + c ctrl + v

[@shortyshorty9762]

ok I'm late but it's really a great tutorial. Thank you very much for that.

[@armanmalik2908]

Bhai Apne ek he div banaya jiski class name.BLOCK GLOW. defined kia lekin CSS k andar Apne poora nam nahi likha Blocks Alag aur glow alag rakah css aplyy karne k liye Bhai thoda bta do ye kya funda h

[@nilayhirpara558]

Because block and glow are two different class. We can write multiple class in html by keeping space between two words.

[@armanmalik2908]

Samajh gya bhai, thanks

[@domo_d3su]

Mines doesn't move somehow Update after 2 mins Just on animation animate 20s it wa 20% before

[@sunilraya1141]

Mines not working any help??

[@wojackcodes]

@@sunilraya1141 DM me, happy to help

[@srinithi9510]

Say and give in tamil how to create in border light effect bacic till advanced

[@dev.sandeepkumar]

::Thumbs up & ::Rocket Emoji

[@ahmedmdtofail]

code doesnt work

[@wojackcodes]

it worked for me recently

[@HarshaBHerath]

😍

[@dallaslang1737]

Thanks for this it's really Cool !

[@jacklin1489]

can i get your code？

[@agustinantunez598]

HELLO, COULD YOU SHARE THE CSS,...PLEASE?

[@parampatel2803]

Hey! We would really like to see this kind of video but can you please upload its code so that it can be easy for us.

[@MetapeterUndMetagreta]

in a textfile named: "rrrainbooow.css" you put: body { background-color: #000; } div { position: relative; margin: 250px auto; width: 500px; height: 500px; background: #000; } div:before, div:after { content: ''; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: mooove 10s linear infinite; } @keyframes mooove { 0% { background-position: 0 0; } 100% { background-position: 400% 0; } } div:after { filter: blur(50px); } in an html file in the same folder with name "icouldntcareless.html" you put:

[@wojackcodes]

just follow along the video, it's not that hard, it worked for me

[@worriorgamer1413]

How to use this? Any tutorial?

[@wojackcodes]

this video is a tutorial video...

[@The_Stone_Zone]

can i get source code

[@besmilling6935]

Sir code is not working If not working then why are u beeing uploaded

[@_editz_dk_]

Bro pls. Send me sorce code 😅

[@barnabuswizardspook]

bro O_O

[@amareswararao5414]

code not clear in video

[@issidork]

This code is not working 😢😢

[@Sammysapphira]

Try actually learning how to code hopefully that helps

[@sunilraya1141]

Code isn't working any help

[@wojackcodes]

Code worked for me recently

[@harry-ns3wh]

mtlb tumne code kyo nhi diya haddd h yaar

[@rivardhanrana4339]

This is not working 😢😢

[@wojackcodes]

Code worked for me recently