How do you like these animated background mesh gradients?
@mahnoorkhandurrani828410 ай бұрын
great ....
@SuperABOALAA6 күн бұрын
just discovered your channel and i'm already hooked !!
@wasiqkhan88616 күн бұрын
Amazing This one change only make the whole website beautiful :)
@mdasikresources28 күн бұрын
Great. Thanks for the tutorial. I tried a similar gradient rays effect for elementor banner.
@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
@alvarogonzalezgomez9374 ай бұрын
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!
@thomdarnell26 күн бұрын
Hey there how can you do this for the entire background on-site settings not just the container background
@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
@dusanmilinkovic68314 күн бұрын
You are the best
@andreaegli3 күн бұрын
🤓
@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.
@gilangagrwn5 ай бұрын
Thanks for the tutorial! Love it!😍
@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 🤓
@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?
@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.
@electriknostalgia9 ай бұрын
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.
@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
@muhammadfarhanrashid8396 Жыл бұрын
AMAZING
@andreaegli Жыл бұрын
🤓 thanks!
@amdimpulse1761 Жыл бұрын
thanks, great tutorial
@andreaegli Жыл бұрын
Thank you 🙏 and I’m happy that you enjoyed it!
@lambertlecourtdeberu205910 ай бұрын
Hello, thank you for these explanations ! Is it possible to apply this mix of animated colours to the background of the whole website?
@FelipeMassara6 ай бұрын
Do you found how to do it ?
@ADIB-xe3rz21 күн бұрын
not working
@andreaegli20 күн бұрын
Give it another try but make sure you follow all the steps