{"id":6045,"date":"2021-04-01T15:54:00","date_gmt":"2021-04-01T15:54:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6045"},"modified":"2021-04-03T16:05:02","modified_gmt":"2021-04-03T16:05:02","slug":"glassmorphism-ui-new-design-trend-used-by-tech-giants","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/information\/glassmorphism-ui-new-design-trend-used-by-tech-giants\/","title":{"rendered":"Glassmorphism UI: New design trend used by tech giants"},"content":{"rendered":"\n

If you\u2019re following design-related websites, such as Dribbble, you might have noticed a\u00a0new design trend\u00a0emerging based on transparent and blurred-out backgrounds with colorful images and shapes. It\u2019s a style that is being used by big brands, such as Apple in its Big Sur MacOS update, and Microsoft in its new Fluent design system. It\u2019s called:\u00a0glassmorphism<\/strong><\/em>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Glassmorphism UI<\/p>\n\n\n\n

The image above is an example of the effect used on a working website, called ui.glass<\/a>. As you can see, the background behind the code is semi-transparent, and there\u2019s also a blur being used. There\u2019s a very nice effect happening because of the colorful card behind it, resulting in the glassmorphism style.<\/p>\n\n\n\n

Another great example is a redesign of the Facebook Messenger App for the Big Sur MacOS operation system, redesigned by Miko\u0142aj Ga\u0142\u0119ziowski on Dribbble:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Messenger App Redesign in Glassmorphism<\/p>\n\n\n\n

The effect is best used when there are simple shapes and backgrounds behind the blurred-out elements, such as in the two examples above. The transparency and color of the element\u2019s background can vary, and it can easily be used and switched between dark and light mode, which is a clear advantage in today\u2019s web design and development requirements.<\/p>\n\n\n\n

As we mentioned in the title, it is not only Apple or Dribbblers using the new trend, but also Microsoft. In fact, they\u2019ve been using it many years ago with the Windows Vista operation system, and it has also been used by iOS 7 in some instances.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

There have been many years since, but Microsoft is also using it currently in its new Fluent Design System, but they call it Acrylic Material. Here\u2019s an example:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Acrylic Material<\/p>\n\n\n\n

Now that we\u2019ve shown you a couple of examples, how can this new design trend be implemented for websites? It\u2019s fairly easy, and we’re going to show it to you.<\/p>\n\n\n\n

Glassmorphism using HTML and CSS<\/h2>\n\n\n\n

The two most important CSS style properties that have to be used to get the glassmorphism effect are the background<\/em> and backdrop-filter <\/em>properties. <\/em>Of course, you also need an element to have a background, such as a card. At the same time, to actually see the effect you will also need a background, shape, or image behind the card.<\/p>\n\n\n\n

Here’s a\u00a0codepen<\/a>\u00a0snippet that you can check out to know the implementation using these properties.<\/p>\n\n\n\n

Glassmorphism: An upcoming CSS UI Library<\/strong><\/h2>\n\n\n\n

There\u2019s a brand new CSS UI library that I\u2019ve been working on with my colleagues at Themesberg, and it is exactly based on this new design trend.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

You can check out some previews on ui.glass<\/a> and sign up for progress updates and be one of the first to be announced when it will be launched. <\/p>\n\n\n\n

We plan it to be a set of UI elements and cards based on the new design trend, and the base project will be free and open-source under the MIT license.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you\u2019re following design-related websites, such as Dribbble, you might have noticed a\u00a0new design trend\u00a0emerging based on transparent and blurred-out backgrounds with colorful images and shapes. It\u2019s a style that is being used by big brands, such as Apple in its Big Sur MacOS update, and Microsoft in its new Fluent design system. It\u2019s called:\u00a0glassmorphism. […]<\/p>\n","protected":false},"author":2,"featured_media":6050,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,77,168],"tags":[227,86,146,181,125,50,203,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/glassmorphism-ui.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1zv","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6045"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6045"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6045\/revisions"}],"predecessor-version":[{"id":6052,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6045\/revisions\/6052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6050"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}