Can I use the generated code for my project? The release is estimated to happen in July, 2021.įeel free to sign up for Glass UI to get updates and find out when it will be launched.

For the HTML components to work, you need will need to include the CSS and Javascript file from the library. This Glassmorphism UI generator is based on the upcoming Glass UI library which will be available to download or include via NPM. How can I get the HTML code for the components? Read the following tutorial to learn more about glassmorphism. 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.Įverything else, such as shadows, borders, border radiuses and colors can all be tweaked based on your own preferences and project specifications.Īnother 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. 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. Glassmorphism is a new design trend which is primarely based on the blurry effect of an element and a background.

Css color codes reddit