Create AMAZING & ANIMATED Mesh Gradient Backgrounds in Elementor FREE

Подписаться 11 тыс.

Просмотров 16 тыс.

50% 1

How do you like this 'effect'? I'm actually using it in a project at the moment and I'm loving how it makes, even the most boring web page, more dynamic.
Let me know what you think!
Timestamps:
00:00 Intro
00:53 Demo
04:27 Outro
Thank you for watching!
CODE:
www.notion.so/CODE-Animated-m...
Tools used in the video:
Mesh gradient generator
csshero.org/mesher/
Noise generator:
www.noisetexturegenerator.com/
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
(this video is about: egli andrea, mesh gradient, animated mesh gradient, elementor animated background, animated colored background, animated coloured background)
#elementortutorial #elementorpagebuilder #elementortipsandtricks

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 39

@andreaegli Год назад

How do you like these animated background mesh gradients?

@mahnoorkhandurrani8284 8 месяцев назад

great ....

@gilangagrwn 3 месяца назад

Thanks for the tutorial! Love it!😍

@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

@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 7 месяцев назад

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 🤓

@vicentecastillodg 9 месяцев назад

thanks for this tutorial!

@andreaegli 9 месяцев назад

You are very welcome, Vicente! 😃

@amdimpulse1761 Год назад

thanks, great tutorial

@andreaegli Год назад

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

@muhammadfarhanrashid8396 Год назад

AMAZING

@andreaegli Год назад

🤓 thanks!

@mauprano 11 месяцев назад

Thank you 🥲

@andreaegli 11 месяцев назад

You’re welcome 😊

@lambertlecourtdeberu2059 7 месяцев назад

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

@FelipeMassara 4 месяца назад

Do you found how to do it ?

@user-zs2mk4tr1q 4 месяца назад

thank u

@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

@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!

@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.

@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.