Тёмный

CSS Morphing Gradients Animated Background 

WeCoded
Подписаться 913
Просмотров 68 тыс.
50% 1

Cool gradient background effect with CSS and SVG filters
Source code: github.com/baunov/gradients-bg

Хобби

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

 

16 апр 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 79   
@devzone7
@devzone7 5 месяцев назад
Amazing UI , you deserve 100K
@lr4796
@lr4796 10 месяцев назад
Loved it thank you!
@TruckWise-ic2lf
@TruckWise-ic2lf 14 дней назад
Converted to Nextjs code, working awesome, Thanks a heaps for the effort, Please keep sharing great things.
@nelke.michael
@nelke.michael 11 дней назад
Golden. Thank you!
@faraaz144
@faraaz144 7 месяцев назад
Thank you so much for this! It looks super good on chrome. I wish it'd look better on firefox too though
@jexroid812
@jexroid812 5 месяцев назад
there is a littile problem with edges in firefox browser but it was a super awsome tutorial, thanks for sharing
@anyname8979
@anyname8979 10 месяцев назад
Красавчик, лучший!
@manuarora
@manuarora 3 месяца назад
THIS IS AWESOME!!!!
@ifeodubela7097
@ifeodubela7097 2 месяца назад
cool to see you here Manu! @manuarora
@rahulgawale
@rahulgawale 14 дней назад
This is Awesome!
@2day159
@2day159 4 месяца назад
cool work thx you for that)
@shamrouzawan
@shamrouzawan 5 месяцев назад
got a new subscriber
@talhaamjad5549
@talhaamjad5549 8 дней назад
Thanks brah
@RocoSafreti
@RocoSafreti 4 месяца назад
Nice 😀
@KimSkogsmo
@KimSkogsmo 3 месяца назад
Beautiful!
@karimmullery2187
@karimmullery2187 2 месяца назад
How did you run It?
@user-yl4pk4lx1x
@user-yl4pk4lx1x 2 месяца назад
О, наш человек)
@d3adweight
@d3adweight 2 месяца назад
i love you bro
@itsjmendez
@itsjmendez 9 месяцев назад
This is 🔥
@itsjmendez
@itsjmendez 9 месяцев назад
Can you do it in Nextjs 13+?
@lightinout
@lightinout 7 месяцев назад
u's a lie
@Thisismuhiuddin
@Thisismuhiuddin 5 месяцев назад
What happens when theres also other pages, would the meshes move along with the scroll? Please respond!
@greysilver00
@greysilver00 Месяц назад
thnx
@karimmullery2187
@karimmullery2187 2 месяца назад
Circles and blur wont show how to fix ?
@ok6747
@ok6747 10 месяцев назад
Thank you for this good video ! Is it normal that the svg effect has very low perf on firefox ?
@WeCoded
@WeCoded 10 месяцев назад
Thank you) hmm, didn't try it on Firefox, tbh. Is performance in other browsers ok?
@ok6747
@ok6747 10 месяцев назад
@@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 🤔
@pumlajscztv
@pumlajscztv Месяц назад
is jose mourinho speaking?
@oluanmontenegro
@oluanmontenegro 6 месяцев назад
Can you provide the CSS / HTML code? to use in elementor
@prokira9686
@prokira9686 10 месяцев назад
Finally after 6 hr of debugging changed it to angular code
@recaihazer
@recaihazer 6 месяцев назад
Could you share code?
@imasunflowerlilfunny3353
@imasunflowerlilfunny3353 2 месяца назад
Lmao 6 hours why!
@karimmullery2187
@karimmullery2187 2 месяца назад
Send?
@khaledtalaat4065
@khaledtalaat4065 Месяц назад
I can't get it to work Could you send me the code man ?
@ahmeds8817
@ahmeds8817 Месяц назад
Can you please share the code?
@Drinkyoghurt
@Drinkyoghurt 27 дней назад
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?
@poojagandhi1457
@poojagandhi1457 Месяц назад
I don't understand what you did in the beginning
@user-iz3qc4gp6w
@user-iz3qc4gp6w Месяц назад
how to implement on elementor on wordpress?
@izusaE
@izusaE 2 месяца назад
It's super cool on Chrome, but it doesn't look well on Firefox, why ?
@maverg
@maverg Месяц назад
I downloaded source code, but it not work. How can I do!
@Drinkyoghurt
@Drinkyoghurt 27 дней назад
Nice! The explanation goes a bit quick however and it's difficult to follow what code gets pasted. Very nice tho!
@artimity
@artimity 3 месяца назад
как это вставить в elementor?
@godspeedsr1471
@godspeedsr1471 2 месяца назад
Does this increase CLS (Cumulative Layout Shift) for the core web vital performance ...?
@arpiliad7739
@arpiliad7739 2 месяца назад
No, it shouldn't.
@godspeedsr1471
@godspeedsr1471 2 месяца назад
@@arpiliad7739 You are correct, I also checked it
@Real909Demon
@Real909Demon Месяц назад
it doesn't work, and it is impossible to install this on windows
@leejacksondev
@leejacksondev 7 месяцев назад
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
@WeCoded 7 месяцев назад
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
@leejacksondev 7 месяцев назад
@@WeCoded fixed it. Just apply to g1 , g2 etc as they don’t inherit. -webkit-filter: url(#goo) blur(40px)
@WeCoded
@WeCoded 7 месяцев назад
@@leejacksondev , I believe this only fixes the blur filter. The goo effect still doesn't work for me
@angelx2873
@angelx2873 5 месяцев назад
@@WeCoded @leejacksondev Hey, to fix the bubble shapes, set the circle-size variable dependent from your device width, ``` --circle-size: 80vw; ```
@aromdanelli4650
@aromdanelli4650 5 месяцев назад
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
@chrishauer5106 Месяц назад
Would you explain this in depth? I'm really fascinated with your research
@kelartesgrowth
@kelartesgrowth 7 месяцев назад
como aplicar isso no elementor?
@adarshsingh2954
@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
@Real909Demon Месяц назад
same
@ConnorGraphics
@ConnorGraphics Месяц назад
Wondering if you fixed this? got same problem
@adarshsingh2954
@adarshsingh2954 Месяц назад
@@ConnorGraphics no bro it isn't fixed do you have any idea
@gstampoulidis
@gstampoulidis 10 месяцев назад
Which font-family?
@WeCoded
@WeCoded 10 месяцев назад
fonts.google.com/specimen/Dongle
@gstampoulidis
@gstampoulidis 10 месяцев назад
@@WeCoded thanks
@shpekov
@shpekov 6 месяцев назад
safari doest work
@MS8A
@MS8A Год назад
I want copy code
@WeCoded
@WeCoded 10 месяцев назад
Source code is here finally :) Check description
@Real909Demon
@Real909Demon Месяц назад
не работает
@user-nf1oz1js1l
@user-nf1oz1js1l 11 дней назад
лол наш што ли ?
@rfryanfavour4369
@rfryanfavour4369 10 месяцев назад
No source code 😅... thanks btw
@WeCoded
@WeCoded 10 месяцев назад
I should've published it, true 😅 maybe I will, just need some extra time
@WeCoded
@WeCoded 10 месяцев назад
Added the source code :)
@rfryanfavour4369
@rfryanfavour4369 10 месяцев назад
@@WeCoded you are an angel ... thanks million
Далее
Fun ways to animate CSS gradients
14:00
Просмотров 237 тыс.
CAN YOU HELP ME? (ROAD TO 100 MLN!) #shorts
00:26
Просмотров 6 млн
Top 2024 Web Design Trends
5:32
Просмотров 420 тыс.
Moving gradient background website in figma
3:47
Просмотров 1,6 тыс.
Incredible scroll-based animations with CSS-only
32:23
Просмотров 334 тыс.
True parallax with CSS-only is now possible
17:32
Просмотров 215 тыс.
Senior Angular Developer Interview (theory)
41:57
Просмотров 3,5 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 883 тыс.