/* Background styles */body {background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');background-position: center;}/* Glassmorphism card effect */.card {backdrop-filter: blur(16px) saturate(180%);-webkit-backdrop-filter: blur(16px) saturate(180%);background-color: rgba(255, 255, 255, 0.75);border-radius: 12px;border: 1px solid rgba(209, 213, 219, 0.3);}/* Generated by https://generator.ui.glass/ */
FAQ about glassmorphism in UI interfaces and the generator
What is "Glassmorphism"?
Glassmorphism is a new design trend which is primarely based on the blurry effect of an element and a background. Although glassmorphism can be seen dated all the way back to Windows Vista, it has recently re-emerged with the macOS Big Sur update and it is increasinly being used across all platforms, including mobile apps, websites, and desktop programs.
How do you achieve the "blurry" effect?
The glassmorphism effect can be achieved using the backdrop-filter: blur(); CSS property and a semi-transparent background for the element that is positioned over the background.
Everything else, such as shadows, borders, border radiuses and colors can all be tweaked based on your own preferences and project specifications.
Another aspect to keep in mind is that the glassmorphism effect should not be overused, but rather be a complementary design effect for components that usually have a background that often changes, such as the navigation bar, a sidebar, and certain cards.
Read the following tutorial to learn more about glassmorphism.
How can I get the HTML code for the components?
This Glassmorphism UI generator is based on the upcoming Glass UI library which will be available to download or include via NPM. For the HTML components to work, you need will need to include the CSS and Javascript file from the library. The release is estimated to happen in July, 2021.
Feel free to sign up for Glass UI to get updates and find out when it will be launched.
Can I use the generated code for my project?
The glassmorphism generator is subject to the MIT license, which means that the code generated by this page is considered open-source and you're free to use it for free or commercial projects. We would appreciate a footer credits backlink, but it is not necessary.
Which brands are currently using glassmorphism?
Although not officially declared, glassmorphism is being used by big brands such as Apple, Microsoft, and even Google to some extent. Apple introduced the glassy background look with the launch of macOS Big Sur, Microsoft is using it with its new Fluent UI design system, and Google is increasingly starting to use transparency in their UI interfaces.
Check out this article to learn more about how glassmorphism is being used by well established companies.
What is the difference between glassmorphism and neumorphism?
The only real similarity between the two is that they are both design trends. Neumorphism UI uses a much more radical set of UI constraints to obtain the effect and it is quite a controversial design system as well.
Glassmorphism on the other hand can also be used sparcely and it is much more versatile and adaptable to different scenarios. With the launch of Glass UI we will try to deliver a set of UI elements that can be used in any project, regardless of the size or requirements.
What about browser support?
Although over 88% percent of browsers support the backdrop-filter CSS property, which is important to obtain the "glassy" look, unfortunately Firefox disabled this feature by default (although it can be enabled from the settings page).
Internet Explorer browsers also don't support this CSS property, however, support has been dropped for this browser and thankfully Microsoft Edge does support it. You can read more about browser support for glassmorphism here.
As a fallback for the Firefox browser issue, you can add a much smaller transparency to the card using the @-moz-document url-prefix() CSS rule.
How can I help?
The Glassmorphism CSS generator is a free tool that you can use to generate CSS and HTML components based on the Glass UI library. You can help us by sharing the project via Twitter, Facebook, YouTube or with your friends.
Sign up to Glass UI
A free and open-source CSS UI library based on the glassmorphism design specifications that will help you quickly design and build beautiful websites and applications.
Beats Pill
Black Beats Pill + Portable Speaker
Chadwick Harrison
Senior DesignerFaster sites deliver better business results for your clients.
- Full Support No
- Storage 50 GB
- Monthly Visitors 400k
