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!
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 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.
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.
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.
How do you like these animated background mesh gradients?
great ....
Amazing This one change only make the whole website beautiful :)
Great. Thanks for the tutorial. I tried a similar gradient rays effect for elementor banner.
I was looking for this animation effect before. Thank you for amazing tutorial 😁👍
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
Thanks for sharing,
I know prople who use even video background to achieve that, so this is very useful.
Egli for the win!
You're welcome!🤓 Seriously, that's crazy
Thanks for the tutorial! Love it!😍
Thank you, this is a cool tool. I like your content hope you keep making more.
Thank you, John! That’s the plan 🤓
Hey there how can you do this for the entire background on-site settings not just the container background
thanks, great tutorial
Thank you 🙏 and I’m happy that you enjoyed it!
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!
Thank you 🥲
You’re welcome 😊
thanks for this tutorial!
You are very welcome, Vicente! 😃
AMAZING
🤓 thanks!
how can I reduce the gradient balls and how can I make them responsive for mobile?
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
@@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?
@@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.
My gradient doesn't seem to move but instead fades in and out? Using the same code
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?
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.
Awesome effect! I'm trying to add 4 colors in the gradient mesh but it looks like the code only works with two.
☺️ I need to try to see if I can make it work with 4…unless you managed?
@@andreaegli Yep used chatgpt to and now i can add as many colors as i like :D
Hi egli, the code works only in the elementor editor.. the background animation doesn’t work outside the elementor editor. Please help
I have it implemented on a website and it works perfectly. What browser are you using?
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.
not working
Give it another try but make sure you follow all the steps
thank u
Hello, thank you for these explanations ! Is it possible to apply this mix of animated colours to the background of the whole website?
Do you found how to do it ?
😊❤️👌👏👏👏
😎
👋