Glassmorphism - UI Design Trend 2020

Ok guys, here we go again. After I came up with Neumorphism last year (and wrote the very first article defining and naming it) this year it's time for Glassmorphism. What is that new UI design style? Is it going to be the main trend for app and web design for 2021? We'll see - probably not, but it can work great if it's used the right way. Some often call it Glass Morphism, or Glass-Morphism, but it's really just Glassmorphism. And you can do it in Figma, Sketch, Adobe XD and likely even Photoshop ;)

Want to learn how? Watch my analysis and a short Sketch and Figma tutorial on how to make this effect.

You can read my original article here:

Albert's CSS breakdown:

Don't forget to follow me on Twitter @michalmalewicz

Enjoy!

[MrBionik]

Michal, thank you for your excellent videos. Recently discovered the channel and I think it's one of the best design channels out there. Please keep these awesome videos coming.

[rodrigooliveira]

Simple and understandable. Thanks for sharing!

[DanilRiabenko]

It reminds me of transparent UI with floating components in sci-fi movies. Designers are getting closer and closer. We will perhaps end up having the UI of the future that we have seen in films that talked about the future. That's cool.

Do you know of any websites with background blur's components? Have you started using the glassmorphism in your professional projects? if so, in what types of projects (website, business tool ...) ans what are the customer feedbacks?

[nikhilmwarrier]

Cool, Michael! Really glass-ish UI is actually useful for

[ayushnayak]

I understood this but in case if we are in need to add clear images what should we do

[ubermac]

Glass-looking elements? Welcome to Mac OS 10.0.

[jackshaw]

Cool stuff! it seems like the new macOS big sur! 学习了！牛逼

[conradfederspiel]

Not one glassmorphism tutorial has text in the background - I wonder why.

[sagihatan]

On figma it's impossible to add drop-shadow,
because it makes the all background dark :(

[swiftui]

awesome video but, how can i do this design in html and css ?

[RodrigoMirra]

I really like this style. However, do any of you know about a real app or website using this style for its UI? I have only seen dribble-like images that look more like an artwork than a real attempt of an interface.

[dmytrokaraulov]

Hello Windows 7 :)

BTW do you have any examples of neumorphism in REAL apps not only dribble shots? Curious to see but hard to find any.

[hakimgulbangash]

hey sir
i have problem when i make the ui of android app in adobe XD
then i export the ui the all assets have no effects of glass why and how i will solve that problem
it will not show the blur effects down plzzz sir told me

[domvial]

Fair to add this is super taxing on the GPU, to the point where I had to turn off the effect as it was getting in the way of a good user experience.

[regent]

That's also somewhat fluent design in windows. Which is itself an evolution of windows aero. Nothing new under the Sun I guess. :D

[MrAgdfgfg]

the apple uses it for a long time and I think it's not like neumorphism because it's usable. Neumorphism is fresher and something rely different but not useful

[neybarao]

Why naming it differently than skeumorphism if it simulates real world materials like glass?
Gotta agree that is cool...

[dikhtiaruk]

Акцент как в американском кино про суровых русских)))

[Sommie_design]

Another useless trend just for hipster-dribbble-shots.