In todays post, we're going to briefly go over what glassmorphism is - and learn how to replicate the effect in Figma!
Introduction
Gla...
For further actions, you may consider blocking this person and/or reporting abuse
I think these are one of those designtrends that look neat now but in a few years will look very outdated. At least the very verbose designs that make everything glass and see through.
Yeah, similar to Neumorphism these designs just look posh now but will be a pain for people to use in a few years from now.
More background blur would be better but honestly glassmorphism has another problem. It is not practically applicable to websites and apps because it looks nice only is there is a gradient background or if there are multiple colors or layers behind the sheet of glass. That is the problem. At least in websites, each component has sub components so when you use glassmorphism, you won't get the desired look. In theory and design, it is awesome and even in designing logos and banners and branding it is cool! But practically it has challenges right now.
I see where you're coming from -- and I'll have to agree, to be honest. It will be very upractical to use this on an actual website, and I think it'll be more centered towards banners, or maybe even things in advertisements and stuffs as shown here
Yeah, you get it! But neumorphism has a larger scope in web development and app development in terms of frontend and design.
I'd agree. But for things like UI cards and stuff on sites we might be seeing more glassmorphic elements come into play :D
A bit retro but a good tool to have in your skill-set. Glass-like overlays (and a sort of frosted glass) was a really popular design choice in the mid 00s.
As with everything, accessibility should be a top consideration. Intentionally blurring and distorting content and text should be done very carefully. Same with using transparencies, gradients, and gradients on top of gradients.
Interesting. I didn't know they were used back in mid 2000s
probably because I wasn't born back then. But I agree with the rest, I don't think in most cases it would be the most genius idea to put this effect on text, buttons, etc. Rather just maybe a few background styling elements, cards, banners, etc.Accessibility should always be a critical part of any new design. If it’s not obvious of the intent, people may think there is something wrong with their eyes. This is different than simply switching from light to dark mode - we once misunderstood a complaint for contrast issues when in fact, it was simply on font choices due to blurring.
But on a different note, great walkthrough
Nice effect for modal background! 😉 Keep writing
Thanks for your kind words! Made my day :)
You deserved it! 😉
Hi, I have seen lot of website design layout with rounded div corners recently like below.
dribbble.com/shots/8509427-Smart-H...
dribbble.com/shots/13819210-Task-S...
dribbble.com/shots/6914699-Smart-H...
dribbble.com/shots/14707518-Web-UI
Is it rounded corners reveal design or Neumorphism or card ui design ?
What is the name of the trend ?
To my knowledge, this isn't any specific design trend. It looks like shadows simlar to neumorphism but with better contrast.
It doesn't make sense. Blurs are generally annoying, and if you're gonna blur an element of the screen because a more important one overlaps it, you may as well hide it completely.
So we end up with glassmorphism being only used to give the classic overlay to increase the contrast between background and content.
Hm. Intesting that you think this. I agree it might be a bad idea to overlay this on text elements, buttons, etc.
As you sound, I think it'll more be used for just UI cards, ads, etc. rather than the example I showed.
It reminds me the days of Windows Vista
Interesting... 😄
This feels like a simplified version of Microsoft's Fluent "acrylic".
Yep. Microsoft has been one of the firsts to start this trend.
I'm not sure if i really agree as these would be interesting trends in 2021.
But thanks for the cool article.
Maybe less for websites, but more for elements like cards on websites, and things like trailers, ads, etc.
Reminds me of acrylic from Microsoft's Fluent Design system.
Yep I've seen Microsoft embracing this style the most (in terms of corporates) as shown in this ad
Looks nice, but tricky to have good contrast between background and text.
I personally don't think people should be putting text in the background... I just added it to better show the glass effect 😄
Very nice, thank you and keep writing about these trends!
Thanks very much!
Nice post
Thanks!