Create AMAZING & ANIMATED Mesh Gradient Backgrounds in Elementor FREE

[@andreaegli]

How do you like these animated background mesh gradients?

[@mahnoorkhandurrani8284]

great ....

[@eriggu2]

Thanks to you . from japan

[@clementyo4526]

I was looking for this animation effect before. Thank you for amazing tutorial 😁👍

[@andreaegli]

Happy to help! 😃 Let me know what else you've been looking for, maybe I can make it 🤓 also, let me know if you have an issues with the code

[@wasiqkhan886]

Amazing This one change only make the whole website beautiful :)

[@SuperABOALAA]

just discovered your channel and i'm already hooked !!

[@mdasikresources]

Great. Thanks for the tutorial. I tried a similar gradient rays effect for elementor banner.

[@gilangagrwn]

Thanks for the tutorial! Love it!😍

[@SaeedMasri]

Thanks for sharing,
I know prople who use even video background to achieve that, so this is very useful.
Egli for the win!

[@andreaegli]

You're welcome!🤓 Seriously, that's crazy

[@electriknostalgia]

Thank you so much for making this video! How do you add text and animated text over this gradient? I want to make a portfolio website with this as my landing page.

[@John_Warnock]

Thank you, this is a cool tool. I like your content hope you keep making more.

[@andreaegli]

Thank you, John! That’s the plan 🤓

[@lambertlecourtdeberu2059]

Hello, thank you for these explanations ! Is it possible to apply this mix of animated colours to the background of the whole website?

[@FelipeMassara]

Do you found how to do it ?

[@thomdarnell]

Hey there how can you do this for the entire background on-site settings not just the container background

[@JohnXionidis]

Awesome effect! I'm trying to add 4 colors in the gradient mesh but it looks like the code only works with two.

[@andreaegli]

☺️ I need to try to see if I can make it work with 4…unless you managed?

[@JohnXionidis]

@@andreaegli Yep used chatgpt to and now i can add as many colors as i like :D

[@amdimpulse1761]

thanks, great tutorial

[@andreaegli]

Thank you 🙏 and I’m happy that you enjoyed it!

[@dusanmilinkovic6831]

You are the best

[@andreaegli]

🤓

[@alvarogonzalezgomez937]

When i paste it on elementor but for mobile version it does not do anythung at all, An as you imagine I need also that gradient on the mobile version. Please, help me!

[@vicentecastillodg]

thanks for this tutorial!

[@andreaegli]

You are very welcome, Vicente! 😃

[@dr.gurn420]

will this slow down my website?

[@andreaegli]

Not too much. Keep in mind that whatever you add to your website will add to the overall slowdown of the website so be mindful 😉

[@TusKSociety]

My gradient doesn't seem to move but instead fades in and out? Using the same code

[@andreaegli]

That’s very strange. Do you have any other css code snippet except for the one controlling the gradient animation? Also, what browser are you using?

[@hollandnr1453]

how can I reduce the gradient balls and how can I make them responsive for mobile?

[@andreaegli]

not fully tested but you could use media queries:
@media (max-width: 480px) {
.mesh-test{
background-size: 130% 130%;
}
}
@media (min-width: 481px) and (max-width: 1024px) {
.mesh-test{
background-size: 150% 150%;
}
}
if you go lower than 110% , the animation doesn't work because these values represent height and width..I hope this helps a bit

[@hollandnr1453]

@@andreaegli thanks for answering. how do I make the gradient balls a bit smaller because I find they are now too big on the screen?

[@andreaegli]

@@hollandnr1453 always!
background-image:
radial-gradient(at 58% 29%, hsla(227,93%,77%,1) 0px, transparent 30%),
radial-gradient(at 43% 49%, hsla(80,95%,71%,1) 0px, transparent 30%);
reduce the transparent value from 50% to 30% or lower...you will need to play around with the other percentages to see what fits best for your use case.

[@muhammadfarhanrashid8396]

AMAZING

[@andreaegli]

🤓 thanks!

[@12xcreativeagency2]

Hi egli, the code works only in the elementor editor.. the background animation doesn’t work outside the elementor editor. Please help

[@andreaegli]

I have it implemented on a website and it works perfectly. What browser are you using?

[@andreaegli]

actually, disregard my q, I've tested it in Arc, Chrome and Safari and it works. Maybe clearing cache & regenerating your CSS will help fix the problem.

[@mauprano]

Thank you 🥲

[@andreaegli]

You’re welcome 😊

[@Techonventures]

thank u

[@ADIB-xe3rz]

not working

[@andreaegli]

Give it another try but make sure you follow all the steps

[@kamessytta]

😊❤️👌👏👏👏

[@andreaegli]

😎

[@dynoom]

[@andreaegli]

👋