2021 Interactive Glassmorphism On The Web Tutorial Using Webflow

[@brianhutson2100]

Your videos are gold - Thank you so much for being so willing to help people learn this stuff!

[@equatorial3127]

My man, you have mastered the way of explaining enough of what youre doing without overexplaining every little step. Also thanks for taking the time to place time stamps.

[@timothyricks]

So glad this helps! Thank you!

[@equatorial3127]

@@timothyricks subbed

[@jo69123]

Timothy you are the Webflow rockstart man, hope you get awards for your tutorials, they are the best I've seen

[@kk-gu1zv]

Absolutely crazy what you can do with webflow! Im mindblown! Thanks for the tutorial very helpful and inspiring

[@danielndrssn]

Really took it to a next level there. I've been just using blur and that’s it. Will give this a try

[@sincemayiv]

you're a webflow wizard ! i'm glad i found this channel

[@rhinoreign1324]

BRO! Your videos are AMAZING! Thank you for always digging deeper into the more crazy aspects of Webflow!

[@abirahmed1292]

Timothy, you are awesome, your tutorial is very unique

[@Nitro_Foundry]

YOU ARE THE GOAT! Thank you so much for this tut. There really should just be a good background blur effect built-in, like XD or Figma. But, our man, good ole' T.Ricks got us covered!

[@bruidbarrett]

bro you are an absolute legend!

[@MikeBurnsUIUX]

Besides the amazing tutorial. Your backdrop and vid quality is fire. Love it!

[@timothyricks]

Thanks so much, Mike! Love improving the setup whenever possible

[@tamilmadurai4569]

How do you make the bubble thingy at 0:21 I really want to know bc I've seen other webflow tutorials have it. Please reply ASAP

[@delfs413]

OMG you dont know how much this would help me with my current project and future projects too! Thank you, Timothy!

[@timothyricks]

So happy to hear that!!

[@brandonbekker6318]

Your videos are really well done and super helpful. Thank you so much and pls keep'em coming!

[@yosoydavide]

This was great, I learned a bunch of stuff and understood a lot more thanks to you explain this one thing. Thank you, mate.

[@byinfinita]

This is awesome! Thank you Timothy!

[@mattirwin6089]

Amazing!!! Keep these tutorials coming!

[@whoisimane]

you're a lifesaver

[@montrelliondakeyz]

Bro please do a breakdown of this whole website. This entire thing is 🔥🔥🔥🔥

[@tyson_young]

Awesome stuff Tim, new sub!

[@timothyricks]

Thanks so much!

[@joshwalker7668]

Super cool man!

[@jonreesedotcom]

Amazeballs. Thank you Tim! 🎉

[@AndresGutierrez-sz2oc]

Awesome tutorial!!!

[@alexandermikolyk7987]

Thank you) how is the WEBFLOW text animation made TRICKS AND WIZARDRY?

[@ByTheSlice]

This is great! Thanks

[@jeisongarzon6066]

Dude awesome video thanks ! I want to ask you something, did you make your personal web site in Webflow ?

[@timothyricks]

Thanks so much! And yes, I did!

[@adepurnama1642]

How much details you want for the glassmorphism card? Ricks: yes

[@filipdahlgren6386]

Thank you! Subscribed with an instant!

[@chakhmanmohamed9436]

Hello Tim. Please can you tell me how to create the nav links bottom border transitions?

[@datdrummachine]

Amazing! Thanks man!

[@Kabarza]

Great job. I'm also interested how you made that lottie animation behind the card?

[@timothyricks]

Thank you! It’s just a background video. I got it from iStock and just changed the colors. www.istockphoto.com/video/liquid-shape-in-holographic-colors-with-ripples-and-waves-transforming-in-space-gm1208595456-349398437

[@hiredgoons9778]

How did you read my mind? Was trying to figure this out for my website yesterday. Thank you!

[@timothyricks]

Haha! Glad to have helped

[@tomasmrazek7198]

Hey Timothy, what is the "" button next to the preview one for? Do you have some beta version of webflow? Thanks.. NIce video as always!

[@timothyricks]

Thank you! That's just a Google Chrome extension for Webflow that makes it easier to add custom code to your project. chrome.google.com/webstore/detail/codemode-for-webflow/mbgenamkihplkffggckaplhnancbojbk?hl=en

[@tomasmrazek7198]

@@timothyricks Thanks very much!

[@juliusfreund4634]

huh. he just blew my mind.

[@-aarohi]

a ball behind card is animated thing or video? plz explain, i want to use it for web development.. actually i am going to make this one web page

[@FernWerk]

It doesn't work for me for some reason. Has the UI changed already maybe? I'm try to do glass morphism around a form block.

[@dariakyselyova4282]

Thank you ✨

[@TheWickedFnatic]

I can't seem to be able to add this effect inside a drop-down menu on mobile devices. My navbar is blurred, then I have a "services" section, then when clicked, it should open a dropdown menu. I can't get that menu to be blurred as the navbar. Is there any way to get this working? A snip of the code: .nav, .dropdown-bg { backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); }

[@lalalotteh]

Hey Fabry (or Timothy), have you found the solution? I'm running into this aswell. Seems like it doesn't work on two classes at the same time!

[@willangusduncan]

Great video, out of interest why do you use em for all your measurements? Does it give more flexibility?

[@timothyricks]

Thank you! Yes, it does. It’s a percentage of the body font size so I can easily switch everything from VW to PX in one click for 2k screens, and also adjust the size of everything really easily on mobile. kzbin.info/www/bejne/bKinZIiia7FmhdE

[@willangusduncan]

@@timothyricks Thanks that's really useful to know!

[@kylenoome4482]

Please can you do a tutorial on that cube nav bar been seeing it a lot on on the forums people seem to be asking to but yet to find a decent answer

[@bryanmanio_]

Oh man, this looks amazing. Are you using a CSS blending mode on that video as well? Curious to how you got it almost looking like it's on a transparent background.

[@timothyricks]

Thank you, Bryan! I tried a CSS blending mode but it washed out the video. I ended up exporting the video with a background close to my site background color. It’s never exact depending on which screen you’re viewing it on, so I had to overlap gradients on all corners of the video to fade the video into the actual background color. Then I also set those colorful gradients to a higher z-index than the video to make the video look more like it didn’t have a background.

[@bryanmanio_]

@@timothyricks Creative solution, nice!

[@sonimoretti]

WOW!!! thank youuuu 💕

[@matheuspires5022]

Amazing content! thanks a lot!

[@sanskarsingh4938]

Now that we have the blur effect available on Webflow, do we still need to use the custom code shown at the start of the video?

[@MubarakMarafa]

GOLD!!

[@IkedaDogbo]

Yes!

[@goldsport]

Awesome tutorial! Do you have a cloneable version somewhere? If we subscribe to your Patreon, do we get it?

[@timothyricks]

Thank you! I have the cloneable available for free at webflow.com/website/TRICKS-Glassmorphism?rfsn=4840096.b820eb&

[@Akshat_psd]

So cool thanks! 🔥❤️

[@carterjarrett4692]

Hi, really enjoy your channel! Is there a reason you’re using code here for this effect as opposed to the no-code options I’ve seen? Early user so I have no clue why this would be preferred. Appreciate the content!

[@timothyricks]

Thanks so much! This tutorial was made before the native blend mode option was released. The native option should work fine for this.

[@cernunnos189]

Yo! Awesome content. How did you make that morphing 3d ball that's behind the card?

[@praneshpandi9124]

YES I NEED TO KNOW HOW TO DO THAT TOO!

[@praneshpandi9124]

Timothy Ricks please reply as fast as you can because ive been wanting the morphing bubble thing for AGES.

[@invisiblehandofadamsmith]

Yaaa Man 😀😀

[@Jona]

dude i opened the video and the card was already there, when other KZbinrs haven't even finished their "please like and su…"

[@kitalako7455]

Oh wow

[@EriCreatorr]

Yo timothy your videos are amazing! I wanted to make a checkout procedure with an animated progress bar on top in webflow, do you know how to create that? im exporting the code afterwards and connecting it to my backend ;)

[@tomhutcheon8403]

Brilliant

[@simonloge3013]

Wow great

[@SayuriYaki]

Unfortunately the glassmorphism effect only works on the paid plan :( thx for the awesome tutorial though.

[@JesseMoffett]

So bad ass!

[@DavidCBriscoe]

Super helpful vid and would be interested to DM you Re a web project?

[@derartas]

niceee