CSS Morphing Gradients Animated Background

Cool gradient background effect with CSS and SVG filters
Source code: github.com/bau...

[@Jay-qx9nn]

sick. very well made my friend!

[@devZone7]

Amazing UI , you deserve 100K

[@prokira9686]

Finally after 6 hr of debugging changed it to angular code

[@recaihazer]

Could you share code?

[@imasunflowerlilfunny3353]

Lmao 6 hours why!

[@karimmullery2187]

Send?

[@khaledtalaat4065]

I can't get it to work Could you send me the code man ?

[@ahmeds8817]

Can you please share the code?

[@ГригорийГанчарук]

чётко! супер гуд . показал этим буржуям как градиенты рисовать!

[@exxxtrone.]

lol

[@manuarora]

THIS IS AWESOME!!!!

[@ifeodubela7097]

cool to see you here Manu! @manuarora

[@faraaz144]

Thank you so much for this! It looks super good on chrome. I wish it'd look better on firefox too though

[@anyname8979]

Красавчик, лучший!

[@TruckWise-ic2lf]

Converted to Nextjs code, working awesome, Thanks a heaps for the effort, Please keep sharing great things.

[@aayushsomani4995]

Can you share the code link please

[@NuttyLlamasftw]

@@aayushsomani4995 I'm literally in the process of making a React component for NextJs as I type this, ill share you the code when i have it done

[@NuttyLlamasftw]

@@aayushsomani4995 won't let me send the code sandbox link, what's your github?

[@NuttyLlamasftw]

@@aayushsomani4995 What's your github so i can send link to sandbox

[@TruckWise-ic2lf]

@@NuttyLlamasftw awesome, let me know if any problems...

[@jexroid812]

there is a littile problem with edges in firefox browser but it was a super awsome tutorial, thanks for sharing

[@nelke.michael]

Golden. Thank you!

[@lr4796]

Loved it thank you!

[@rahulgawale]

This is Awesome!

[@Человек-ш4о]

О, наш человек)

[@2day159]

cool work thx you for that)

[@KimSkogsmo]

Beautiful!

[@karimmullery2187]

How did you run It?

[@AugusDogus]

oh yeah, this is the stuff

[@itsjmendez]

This is 🔥

[@itsjmendez]

Can you do it in Nextjs 13+?

[@lightinout]

u's a lie

[@damiandohshinobi8127]

great!

[@shamrouzawan]

got a new subscriber

[@RocoSafreti]

Nice 😀

[@talhaamjad5549]

Thanks brah

[@d3adweight]

i love you bro

[@oluanmontenegro]

Can you provide the CSS / HTML code? to use in elementor

[@pumlajscztv]

is jose mourinho speaking?

[@aromdanelli4650]

Gente, pra usar no angular é simples: O :root vc recorta e cola no style.css Fora isso, no css não muda nada. No html não muda nada. Agora no TS vai ficar assim: export class TesteComponent implements OnInit { ngOnInit() { const interBubble = document.querySelector('.interactive')!; let curX = 0; let curY = 0; let tgX = 0; let tgY = 0; [...] restante do código sem mudar nada

[@chrishauer5106]

Would you explain this in depth? I'm really fascinated with your research

[@greysilver00]

thnx

[@karimmullery2187]

Circles and blur wont show how to fix ?

[@sandeepasineth8446]

Will I convert for react or just give up...

[@Drinkyoghurt]

Nice! The explanation goes a bit quick however and it's difficult to follow what code gets pasted. Very nice tho!

[@ok6747]

Thank you for this good video ! Is it normal that the svg effect has very low perf on firefox ?

[@WeCoded]

Thank you) hmm, didn't try it on Firefox, tbh. Is performance in other browsers ok?

[@ok6747]

@@WeCoded Yes, it seems that all browsers use GPU except Firefox that uses CPU for rendering (even with GPU rendering on). I don't really understand how the SVG thing works but i wonder if there is a way to tell firefox to use GPU 🤔

[@dr.gurn420]

does animating the background slow anyone elses browser down? i managed to get a cool effect but im worries it will be slow for the end user. e.g. all my hover items are now delayed.

[@DavidCoelho-d1o]

this has a big problem that makes the gpu work to hard

[@maverg]

I downloaded source code, but it not work. How can I do!

[@izusaE]

It's super cool on Chrome, but it doesn't look well on Firefox, why ?

[@poojagandhi1457]

I don't understand what you did in the beginning

[@Real909Demon]

it doesn't work, and it is impossible to install this on windows

[@Drinkyoghurt]

Quick question, I can't get the goo filter to work. I copied your code and even cloned the repo, but it didn't work. What am I doing wrong here?

[@TobySkyring]

anyone get this to webflow?

[@adarshsingh2954]

Hey I am getting some problem When I downloaded the source code it's only showing the text Bubbles when I open it in live server no animation nothing is showing then I tried to host it to test it's not showing anything either hey can anyone help me

[@Real909Demon]

same

[@ConnorGraphics]

Wondering if you fixed this? got same problem

[@adarshsingh2954]

@@ConnorGraphics no bro it isn't fixed do you have any idea

[@Thisismuhiuddin]

What happens when theres also other pages, would the meshes move along with the scroll? Please respond!

[@Comicsinreality]

I came here for the name of that font😂

[@ADIB-xe3rz]

how can i implement this on my elementor website?

[@HarishGedekar]

how to implement on elementor on wordpress?

[@leejacksondev]

Any hacks to get this to work in Safari? Looks epic in Chrome but Safari it shows as ovals moving around the screen. Would love some ideas.

[@WeCoded]

Hi, I've been trying to fix this in other browsers with no success so far. Only managed to get the blur working, but the custom svg filter doesn't seem to work in safari unfortunately. This seems to be a known issue. The only solution I could think of now is to try replicating this effect in canvas using shaders - which is a totally different story. But at least it'd guarantee the consistency of the effect and would give maximum performance.

[@leejacksondev]

@@WeCoded fixed it. Just apply to g1 , g2 etc as they don’t inherit. -webkit-filter: url(#goo) blur(40px)

[@WeCoded]

@@leejacksondev , I believe this only fixes the blur filter. The goo effect still doesn't work for me

[@angelx2873]

@@WeCoded @leejacksondev Hey, to fix the bubble shapes, set the circle-size variable dependent from your device width, ``` --circle-size: 80vw; ```

[@weltenlaeufer]

can you publish the source code?

[@godspeedsr1471]

Does this increase CLS (Cumulative Layout Shift) for the core web vital performance ...?

[@arpiliad7739]

No, it shouldn't.

[@godspeedsr1471]

@@arpiliad7739 You are correct, I also checked it

[@artimity]

как это вставить в elementor?

[@gstampoulidis]

Which font-family?

[@WeCoded]

fonts.google.com/specimen/Dongle

[@gstampoulidis]

@@WeCoded thanks

[@yass3548]

not working

[@kelartesgrowth]

como aplicar isso no elementor?

[@shpekov]

safari doest work

[@MS8A]

I want copy code

[@WeCoded]

Source code is here finally :) Check description

[@Real909Demon]

не работает

[@rfryanfavour4369]

No source code 😅... thanks btw

[@WeCoded]

I should've published it, true 😅 maybe I will, just need some extra time

[@WeCoded]

Added the source code :)

[@rfryanfavour4369]

@@WeCoded you are an angel ... thanks million

[@ОлуксійСергіїович]

лол наш што ли ?

[@oldiBerezko_]

Кнш😊

[@ОлуксійСергіїович]

@@oldiBerezko_ акцент жесть ))))) ті давно в єтой сфере ? мог бы мой сайт покретиковать можнт посоветовать в общем взглянуть + мненние ?